css中的7中属性选择器

　　在CSS的选择符中有七个属性选择符。它们分别是：

　　1.E[att] 选择具有att属性的E元素。

　　2.E[att="val"] 选择具有att属性且属性值等于val的E元素。

　　3.E[att~="val"] 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。

　　4.E[att|="val"]  选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

　　5.E[att^="val"] 选择具有att属性且属性值为以val开头的字符串的E元素。

　　6.E[att$="val"] 选择具有att属性且属性值为以val结尾的字符串的E元素。

　　7.E[att*="val"] 选择具有att属性且属性值为包含val的字符串的E元素。

　　其中前四个是CSS2中原有的，后面三个是CSS3中新增加的属性选择符。对于这些属性选择符的具体使用，下面我们举例说明。

p[class]{color:green;}

　　p[width]{color:rgb(255,255,128;}

　　p[class="qq"]{color:red;}     

　　p[class~="abc"]{color:blue;}

　　p[class^="aa"]{color:yellow;}

　　p[class$="abc"]{color:black;}

　　p[class*="z"]{color:orange;}

　　p[class|="y"]{color:#ccc;}

 

<p class="a">绿色</p>

<p class="qq">红色</p>

<p class="xyz abc">蓝色</p>

<p class="aa123">黄色</p>

<p class="test-abc">黑色</p>

<p class="hello-z-world">橙色</p>

<p class="y-1">灰色</p>

<p class="y-2">灰色</p>

<p width="60px">紫色</p>

<p width="80px">紫色</p>

<p width="90px">紫色</p>

 

通过上面的代码我们可以看到p标签里面的文字的颜色依次变为了绿，红，蓝……从而可以得出上述的样式选择器分别选择了上面具有不同属性以及class属性值的p标签。由此，CSS中的7种属性选择器其所选择的标签是通过标签中的属性以及属性的值所决定的，对于不同的属性，同一属性不同的属性值通过不同的属性选择器能够筛选出对应的特定标签，这方便了我们今后对特定样式的设置。