css選擇器的作用就是從html頁面中找出特定的某類元素。常用的幾類css選擇器如下表所示。
偽選擇器比較特殊，分為偽元素和偽類元素兩種。
1.e[att^=value]屬性選擇器
e[att^=value]屬性選擇器是指選擇名稱為e的標記，且該標記定義了att屬性，att屬性值包含字首為value的子字串。需要注意的是e是可以省略的，如果省略則表示可以匹配滿足條件的任意元素。
2.e[att$=value]屬性選擇器
e[att$=value]屬性選擇器是指選擇名稱為e的標記，且該標記定義了att屬性，att屬性值包含字尾為value的子字串。與e[att^=value]選擇器一樣，e元素可以省略，如果省略則表示可以匹配滿足條件的任意元素。
3、e[att*=value]屬性選擇器
e[att*=value]選擇器用於選擇名稱為e的標記，且該標記定義了att屬性，att屬性值包含value的子字串。該選擇器與前兩個選擇器一樣，e元素也可以省略，如果省略則表示可以匹配滿足條件的任意元素。
1.子代選擇器（>）
子代選擇器主要用來選擇某個元素的第一級子元素。例如希望選擇只作為 h1 元素子元素的 strong 元素，可以這樣寫：h1 > strong。
2.兄弟選擇器（+、~）
兄弟選擇器用來選擇與某元素位於同乙個父元素之中，且位於該元素之後的兄弟元素。兄弟選擇器分為臨近兄弟選擇器和普通兄弟選擇器兩種。
（1）臨近兄弟選擇器
該選擇器使用加號「+」來鏈結前後兩個選擇器。選擇器中的兩個元素有同乙個父親，而且第二個元素必須緊跟第乙個元素。
（2）普通兄弟選擇器
普通兄弟選擇器使用 「~」來鏈結前後兩個選擇器。選擇器中的兩個元素有同乙個父親，但第二個元素不必緊跟第乙個元素。
:root選擇器
:root選擇器用於匹配文件根元素，在html中，根元素始終是html元素。也就是說使用「:root選擇器」定義的樣式，對所有頁面元素都生效。對於不需要該樣式的元素，可以單獨設定樣式進行覆蓋。
:not選擇器
如果對某個結構元素使用樣式，但是想排除這個結構元素下面的子結構元素，讓它不使用這個樣式，可以使用:not選擇器。
如： body *:not(h3)
:only-child 選擇器
:only-child 選擇器用於匹配屬於某父元素的唯一子元素的元素，也就是說，如果某個父元素僅有乙個子元素，則使用「:only-child 選擇器」可以選擇這個子元素。
:first-child和:last-child選擇器
:first-child選擇器和:last-child選擇器分別用於為父元素中的第乙個或者最後乙個子元素設定樣式。
:nth-child(n)和:nth-last-child(n)選擇器
使用:first-child選擇器和:last-child選擇器可以選擇某個父元素中第乙個或最後乙個子元素，但是如果使用者想要選擇第2個或倒數第2個子元素，這兩個選擇器就不起作用了。為此，css3引入了:nth-child(n)和:nth-last-child(n)選擇器，它們是:first-child選擇器和:last-child選擇器的擴充套件。
:nth-of-type(n)和:nth-last-of-type(n)選擇器
在上一節介紹了:nth-child(n)和:nth-last-child(n)選擇器，並實現了一些簡單的頁面效果，本節將引入:nth-of-type(n)和:nth-last-of-type(n)選擇器，這兩種選擇器的不同之處在於:nth-of-type(n)和:nth-last-of-type(n)選擇器用於匹配屬於父元素的特定型別的第 n 個子元素和倒數第n個子元素，而:nth-child(n)和:nth-last-child(n)選擇器用於匹配屬於父元素的第 n 個子元素和倒數第n個子元素，與元素型別無關。
:nth-of-type的值還可以設為odd或2n-1（奇數），even或2n（偶數），即為選擇所有排序為奇數或偶數的元素
:empty選擇器
:empty選擇器用來選擇沒有子元素或文字內容為空的所有元素。
:target選擇器
:target選擇器用於為頁面中的某個target元素（該元素的id被當做頁面中的超連結來使用）指定樣式。只有使用者單擊了頁面中的超連結，並且跳轉到target元素後，:target選擇器所設定的樣式才會起作用。
ps：在用標籤進行巢狀時要注意，標籤不能巢狀塊級元素甚至不能巢狀元素，只能巢狀內聯元素，不然對巢狀的塊級元素設定css不起作用。
比如：用:only-child選擇器來修飾的巢狀元素，看是否起作用。
效果很明顯，巢狀在元素裡面的子元素字型顏色沒有變紅，說明巢狀的塊級元素設定css不起作用.
1.:before選擇器
:before偽元素選擇器用於在被選元素的內容前面插入內容，必須配合content屬性來指定要插入的具體內容。其基本語法格式如下：
《元素》:before
在上述語法中，被選元素位於「:before」之前，「｛｝」中的content屬性用來指定要插入的具體內容，該內容既可以為文字也可以為。
2.:after選擇器
:after偽元素選擇器用於在某個元素之後插入一些內容，使用方法與:before選擇器相同。
1.鏈結偽類
在css中，通過鏈結偽類可以實現不同的鏈結狀態。所謂偽類並不是真正意義上的類，他的名稱是由系統定義的，通常由標記名、類名或id名加「:」構成。超連結標記的偽類有4種，具體如下表所示。
css3 選擇器 CSS3選擇器
子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素，則不會被選擇。符號之前書寫父級的選擇器，符號之後寫子級選擇器，必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...
CSS3常用選擇器
概念 子元素選擇器只能選擇某元素的子元素 語法格式 父元素 子元素 father children 相容性 ie8 firefox chrome safari opera 概念 相鄰兄弟選擇器可以選擇緊接在另一元素後的元素，而且他們具有乙個相同的父元素 語法格式 元素 兄弟相鄰元素 eelement...
css3 選擇器 CSS3選擇器詳解
css3在css2基礎上，增強或新增了許多特性，彌補了css2的眾多不足之處，使得web開發變得更為高效和便捷。比如說，同樣是乙個頭像，可能在低版本的瀏覽器中，頭像方的 在高版本的瀏覽器中，頭像是圓的。漸進增強和優雅降級之間的不同 面試題目 由於css3普遍存在相容性問題，為了避免因相容性帶來的干擾...