属性选择器笔记

1.简单属性选择器

<div class="a">a</div>
<div class="b">b</div>
<div>c</div>
div[class]{background-color: #ddd;}
div[class][id]{font-size:20px}

2.根据具体属性值选择

<div class="a">a</div>
<div class="b bb">b</div>
<div>c</div>
div[class="a"]{background-color: #f00;}
div[class="b bb"]{background-color: #ddd;}

　注意 ：当有两个属性值时（第二个div中有两个class属性），这时必须写作div[class="b bb"].

3.根据部分属性值选择

<div class="a com">a</div>
<div class="b com">b</div>
<div class="ccom">c</div>
div[class~="com"]{background-color: #f00;}

　~ 的含义是匹配某个class属性，如上述例子  第三个div是不能匹配的。

4.子串属性匹配选择器

[foo^="bar"]选择foo属性值以“bar”开头的所有元素

<div class="diva">a</div>
<div class="divb">b</div>
<div class="cdiv">c</div>
div[class^="div"]{background-color: #f00;}
div[class^="c"]{font-style: italic;}

　　注意：<div class="adiv diva">a</div> 是不可以匹配上述第一条样式的，但是<div class="diva adiv">a</div> 是可以匹配的。

类似的子串属性选择还有以下几种：

　　[foo$="bar"]选择foo属性值以“bar”结尾的所有元素

　　[foo*="bar"]选择foo属性值含有子串“bar”的所有元素

　　[foo|="bar"]选择foo属性值等于“bar”或者以“bar-”开头的所有元素，如下：

<div class="div-a">a</div>
<div class="div-b">b</div>
<div class="div">c</div>
div[class|="div"]{background-color: #f00;}

以上div全部被选中。