css是用於網頁設計可用的最強大的工具之一。使用它我們可以在幾分鐘內改變乙個**的介面，而不用改變頁面的標籤。在深入研究css選擇器之前，我們應該先搞懂css優先順序是如何工作的。比如給乙個p標籤增加乙個類（class），可是執行後該class中的有些屬性並沒有起作用。通過firebug檢視，發現沒有起作用的屬性被覆蓋了。這個時候css選擇器優先順序的問題了。
當我們寫css的時候需要注意有些選擇器在級聯(cascade)上會高於其它選擇器，我們寫在最後面的選擇器將不一定會覆蓋前面我們寫在同乙個元素的樣式。那麼你如何計算指定選擇器的優先順序？如果你考慮到將優先順序表示為用逗號隔開的四個數字就會相當簡單，比如：1, 1, 1, 1 或0, 2, 0, 1
#sidebar h2 — 0, 1, 0, 1
h2.title — 0, 0, 1, 1
h2 + p — 0, 0, 0, 2
#sidebar p:first-line — 0, 1, 0, 2
在下面的例子中，第乙個將會起作用，因為它比第二個優先順序高：
#sidebar p#first — 0, 2, 0, 1
#sidebar p:first-line — 0, 1, 0, 2
至少基本理解優先順序是如何工作的是很重要的，但是一些工具比如firebug，在我們審查指定元素的時候，按照選擇器的優先順序列出所有的css選擇器對讓我們知道在指定元素上哪個選擇器是有效的是很有用的，讓你非常容易的看到那個選擇器作用於乙個元素上了。
css3 選擇器分類
css3選擇器分類如下圖所示：
選擇器的語法
1，基本選擇器語法
選擇器型別
功能描述
*通配選擇器
選擇文件中所有html元素
e元素選擇器
選擇指定型別的html元素
#idid選擇器
選擇指定id屬性值為「id」的任意型別元素
.class
類選擇器
選擇指定class屬性值為「class」的任意型別的任意多個元素
selector1,selectorn
群組選擇器
將每乙個選擇器匹配的元素集合並
2，層次選擇器語法
選擇器型別
功能描述
e f後代選擇器（包含選擇器）
選擇匹配的f元素，且匹配的f元素被包含在匹配的e元素內
e>f
子選擇器
選擇匹配的f元素，且匹配的f元素所匹配的e元素的子元素
e+f相鄰兄弟選擇器
選擇匹配的f元素，且匹配的f元素緊位於匹配的e元素的後面
e~f通用選擇器
選擇匹配的f元素，且位於匹配的e元素後的所有匹配的f元素
3，動態偽類選擇器語法
選擇器型別
功能描述
e:link
鏈結偽類選擇器
選擇匹配的e元素，而且匹配元素被定義了超連結並未被訪問過。常用於鏈結描點上
e:visited
鏈結偽類選擇器
選擇匹配的e元素，而且匹配元素被定義了超連結並已被訪問過。常用於鏈結描點上
e:active
使用者行為選擇器
選擇匹配的e元素，且匹配元素被啟用。常用於鏈結描點和按鈕上
e:hover
使用者行為選擇器
選擇匹配的e元素，且使用者滑鼠停留在元素e上。ie6及以下瀏覽器僅支援a:hover
e:focus
使用者行為選擇器
選擇匹配的e元素，而且匹配元素獲取焦點
4，目標偽類選擇器
選擇器功能描述
e:target
選擇匹配e的所有元素，且匹配元素被相關url指向
5，ui元素狀態偽類選擇器語法
選擇器型別
功能描述
e:checked
選中狀態偽類選擇器
匹配選中的複選按鈕或者單選按鈕表單元素
e:enabled
啟用狀態偽類選擇器
匹配所有啟用的表單元素
e:disabled
不可用狀態偽類選擇器
匹配所有禁用的表單元素
6，結構偽類選擇器使用語法
選擇器功能描述
e:first-child
作為父元素的第乙個子元素的元素e。與e:nth-child(1)等同
e:last-child
作為父元素的最後乙個子元素的元素e。與e:nth-last-child(1)等同
e:root
選擇匹配元素e所在文件的根元素。在html文件中，根元素始終是html，此時該選擇器與html型別選擇器匹配的內容相同
e f:nth-child(n)
選擇父元素e的第n個子元素f。其中n可以是整數（1，2，3）、關鍵字（even，odd）、可以是公式（2n+1）,而且n值起始值為1，而不是0.
e f:nth-last-child(n)
選擇父元素e的倒數第n個子元素f。此選擇器與e:nth-child(n)選擇器計算順序剛好相反，但使用方法都是一樣的，其中：nth-last-child(1)始終匹配最後乙個元素，與last-child等同
e:nth-of-type(n)
選擇父元素內具有指定型別的第n個e元素
e:nth-last-of-type(n)
選擇父元素內具有指定型別的倒數第n個e元素
e:first-of-type
選擇父元素內具有指定型別的第乙個e元素，與e:nth-of-type(1)等同
e:last-of-type
選擇父元素內具有指定型別的最後乙個e元素，與e:nth-last-of-type(1)等同
e:only-child
選擇父元素只包含乙個子元素，且該子元素匹配e元素
e:only-of-type
選擇父元素只包含乙個同型別子元素，且該子元素匹配e元素
e:empty
選擇沒有子元素的元素，而且該元素也不包含任何文字節點
注：（1），「ul>li:nth-child(3)」表達的並不是一定選擇列表ul元素中的第3個子元素li，僅有列表ul中第3個li元素前不存在其他的元素，命題才有意義，否則不會改變列表第3個li元素的樣式。
（2），:nth-child(n) 中引數只能是n，不可以用其他字母代替。
（3），:nth-child(odd) 選擇的是奇數項，而使用:nth-last-child(odd) 選擇的卻是偶數項
7，否定偽類選擇器
選擇器功能描述
e:not(f)
匹配所有除元素f外的e元素
8，屬性選擇器語法
選擇器功能描述
[attribute]
用於選取帶有指定屬性的元素。
[attribute=value]
用於選取帶有指定屬性和值的元素。
[attribute~=value]
用於選取屬性值中包含指定詞彙的元素。
[attribute
=value] 用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。
[attribute^=value]
匹配屬性值以指定值開頭的每個元素。
[attribute$=value]
匹配屬性值以指定值結尾的每個元素。
[attribute*=value]
匹配屬性值中包含指定值的每個元素。
注：例其中a[class=「links」] 是找不到匹配元素，只有a[class=「links item」]才匹配
css3選擇器歸類整理 基本選擇器和屬性選擇器
css3選擇器分類 css3選擇器分類如下圖所示 選擇器的語法 1.基本選擇器 型別 功能描述 通配選擇器 選擇文件中所有html元素 元素選擇器 body 選擇指定型別的html元素 類選擇器 list 選擇指定class屬性值為 class 的 任意型別的任意多個元素 id選擇器 list 選擇...
css3 選擇器 CSS3選擇器
子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素，則不會被選擇。符號之前書寫父級的選擇器，符號之後寫子級選擇器，必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...
css3 選擇器 CSS3選擇器詳解
css3在css2基礎上，增強或新增了許多特性，彌補了css2的眾多不足之處，使得web開發變得更為高效和便捷。比如說，同樣是乙個頭像，可能在低版本的瀏覽器中，頭像方的 在高版本的瀏覽器中，頭像是圓的。漸進增強和優雅降級之間的不同 面試題目 由於css3普遍存在相容性問題，為了避免因相容性帶來的干擾...