css3在原來的原則器基礎上增加了很多態別的選擇器，下面總結一下css3提供的選擇器，當做乙個複習。
一、基礎選擇器
1、* ：通配選擇器，選擇html文件中的所有元素。
2、#idvalue :id選擇器，選擇id為idvalue的元素。
3、.classvalue :類選擇器，選擇類為classvalue的元素
4、e: 標籤選擇器，選擇所有e元素
5、e，#idvalue,.classvalue :群組表示式，選擇所有的e元素和id為idvalue的元素，類為classvalue的元素。
二、層次結構選擇器
1、e f ：後代選擇器，選擇以e為父元素，後代中的f元素，如下圖:
123我被選中了45
67 div span{}選中的即為div裡的span元素
2、e>f :子選擇器，選擇以e為父元素，子元素為f的元素，注意只能選擇e的子元素f，e的孫子元素f是不能被選中的。如下圖：
12我是子元素34
我是子元素的子元素56
7 div >span{}選中的是內容是我是子元素的span
3、e+f:相鄰兄弟選擇器，選擇跟e在同一層級的f元素，如下圖：
12我是子元素34
我是兄弟元素
5 div +p選中的是內容為我是兄弟元素的p元素
4、e~f :通用選擇器，選擇排在e後面的所有兄弟元素，跟兄弟原則器不同的是它只選擇後面的兄弟元素，前面的不選擇，如下圖：
1我是前面兄弟元素23
我是子元素的子元素
4我是子元素56
我是後面兄弟元素
78 div ~span{}選中的是內容為我是後面兄弟元素的span元素
三、屬性選擇器
1、[attr]：選擇有attr屬性的所有元素
2、[attr=value]：選擇有attr屬性且屬性的值為value的元素
2、[attr^=value]:選擇有attr屬性且屬性值以attr開頭的元素，如下圖：
1class="
divfirst
">class以div開頭
2class="
divsecond
">class以div開頭
3class="
three
">class不以div開頭
45 div[class^="
div"
]8 匹配到的是前兩個div
3、[attr$=value]:選擇有attr屬性且屬性的值以value為結尾。如下圖：
1class="
div">class以v結尾
2class="
div">class以v結尾
3class="
three
">class不以v結尾
45 div[class$="
div"
]8 匹配到前兩個div
4、[attr*=value]:選擇有attr屬性且屬性值包含value的元素，如下圖：
1class="
div">
2class="
div">
3class="
dthree
">
45 div[class*="
d"]{} 選中div元素中class屬性中包含d的元素，上面三個div都選中
5、[attr|=value]：選擇有attr屬性並且屬性值以value開頭的元素，其中value必須為乙個完整的單詞。
6、[attr~=value]：選擇有attr屬性並且屬性值包含value的元素，其中的value必須是完整的單詞。
四、ui狀態偽類選擇器
1、e:checked：匹配選中的表單元素，比如選中的單選框，核取方塊。
2、e:enabled：匹配啟用的所有表單元素
3、e:disabled：匹配被禁用的表單元素
五、目標偽類選擇器
1、e：target：選擇被url指向的e元素，如圖：
1"div1
">1112"
div2
">2223"
#div1
">跳轉到145
div:target
8 當點選超連結時，第乙個div的字型顏色變紅。
六、動態偽類選擇器
3、e:active：匹配被啟用的元素
4、e:focus：匹配獲得焦點的元素
5、e:hover：匹配滑鼠放在上面的元素
七、否定偽類選擇器
1、e:not(f):選擇所有不滿足f條件的e元素。
八、結構偽類選擇器
1、e:first-child:匹配e元素的父元素的第乙個子元素是e的e元素，如下圖：
1211111
322222
433333
544444
6555555
78 pl：first-child匹配到的是第乙個p元素，如果在第乙個p元素前面加乙個span元素，則不能匹配到任何元素。
2、e:last-chilid：匹配e元素的父元素的最後乙個子元素是e的e元素，如圖：
1211111
322222
433333
544444
6555555
78 p：lastt-child匹配到的是最後乙個p元素，如果在最後乙個p元素後面加乙個span元素，則不能匹配到任何元素。
3、e:nth-child(n):匹配e的父元素的處在第n個位置的子元素，如果第n個子元素為e，則匹配成功，否則匹配失敗。
4、e:nth-last-child：匹配e的父元素從後面數起的第n個子元素，如果第n個子元素為e，則匹配成功，否則匹配失敗。
5、e:only-child：匹配e的父元素中只有乙個子元素，且該子元素是e的e元素。
6、e:root：匹配元素e所在的文件的根元素。
7、e:nth-of-type(n):匹配元素e的父元素中的第n個e元素，與e:nth-chilid不同的是，計算n的時候，nth-chilid是把所有的子元素都算在裡面，而nth-of-type只計算子元素為e的元素。
8、e:nth-of-last-type(n)：匹配元素e的父元素中從最後算起的第n個e元素
9、e:first-of-type:匹配元素e的父元素中的第乙個子元素e。
10、e:last-of-child：匹配元素e的父元素中的最後乙個子元素e.
11、e:only-of-type:匹配e的父元素中只有乙個e子元素的e元素，與e:only-child不同的是，only-child中只有乙個子元素，而only-of-type中可以有多個子元素，但子元素e只能有乙個。
12、e:empty：選擇沒有任何子元素的e元素。
css學習之選擇器
這是我的第一篇部落格,說實話還有點小緊張.id選擇器與類選擇器 id與類選擇器大體上相差無幾,兩者都是規定出在預設標籤或派生選擇器的例外情況,與類選擇器不同的是id選擇器只可以依附於乙個標籤而類選擇器可以應用於不同標籤 屬性選擇器 格式 id class 標籤名 標籤內屬性 value 引數 兄弟姐...
CSS學習之選擇器
doctype html html head meta charset utf 8 title css之選擇器 title style body 後代選擇器選擇後面的全部 div strong 子元素選擇器。只顯示直屬的 div strong 交集選擇器。即是 關係,又是 關係 p.red 並集選擇...
JQuery選擇器之CSS選擇器
語法描述 選擇所有元素 選擇特定型別的元素 選擇具有特定class的元素 選擇具有特定class的某類元素 id 選擇具有特定id屬性值的元素 語法描述 attr 選取定義了attr屬性的元素，即使這個屬性值為空 attr val 選擇attr屬性值等於字串val的元素 attr val 選擇att...