CSS屬性、僞類選擇器，CSS3選擇器

CSS1時IE6是部分支持，偉大的IE6！CSS2時IE6部分支持，偉大的IE6依舊是部分支持！CCS3盛行CSS4也已經提上日程的如今，IE6徹底不支持。IE6你該走了，咱們會永遠記住你的功績的！IE6在天朝什麼時候能壽終就寢！

以上跟本文章無關，今天咱們來CSS的選擇器，雖然IE6不支持，可是jqurey實現了CSS的不少選擇器的，因此就當溫習jqurey的選擇器。

由於偉大的IE6不支持CSS2的有些高級屬性，因此CSS選擇器一直沒有發揮。要記住一點：對於站點功能很重要的元素仍是不要用一些「高級的東西」，由於在天朝都是盜版XP。

正文：選擇器的做用就是「選擇」和「過濾」兩個功能，而且能夠混合使用。主要的區別是」過濾」做用的選擇器是指定條件從前面匹配的內容中篩選。

基本選擇器

基本選擇器很簡單，以下：

1. * ：通用元素選擇器，匹配任何元素
2. 元素選擇器 ：選取某個 HTML 元素，好比 p、h一、em、a，甚至能夠是 html 自己
3. 類選擇器 ：形式 .通配符 ,既選取全部class屬性中包含通配符的元素
4. ID 選擇器：形式 #通配符 ,既選擇ID屬性中包含通配符的元素，只能有一個
5. 後代選擇器：既選取某元素的後代元素,如 #father .son
6. 「>」：既選取某個元素的第一級子元素， 表明子選擇器，
   IE6不支持
7. 「~」：既選取全部兄弟元素。如 div~p div的 兄弟p元素 將被選取。
   IE6不支持
8. 「+」：既選擇兄弟元素後面緊跟的第一個元素。如 div>p div的 p兄弟元素中的第一個 將被選擇。
   IE6不支持

高級選擇器

首先確保瞭解CSS優先級的工做原理，否則被覆蓋還沒知道什麼什麼緣由。本頁全部DEMO

屬性選擇器

屬性選擇器(Attribute selector)是CSS 2 引入了屬性選擇器。

咱們能夠只指定該元素的某個屬性，這樣全部使用該屬性都將被選取；也能夠更加明確並定位在這些屬性上使用特定值的元素 。以下

1. [att] 簡單屬性選擇：選擇有某個屬性的元素，能夠根據多個屬性進行選擇，只需將屬性選擇器連接在一塊兒。
2. [att=value] ：屬性跟值都要求同樣，也能夠根據多個屬性進行選擇。
3. [att~=value] 部分屬性值選擇：根據屬性值中的詞列表的某個詞進行選擇，若是忽略了波浪號，則說明須要完成徹底值匹配。
4. [att^=value] ：該屬性的值以指定值開始。(好比href=」http://www」，則將二級域名和已經域名區分開來)
5. [att$=value] ：該屬性的值包含指定的值(而不管其位置)。(譬如href=」html5jscss」，則選擇全部帶href帶html5jscss的連接)
6. [att*=value] ：該屬性的值以指定的值結束。(譬如href=」.pdf」，則選擇以.pdf結尾的的連接)
7. [att|=value] ：屬性的值等於「value」或以「value-」開始的全部元素，也就是「value-」。(譬如class=」post-bg」)

僞類選擇器

僞類選擇器以前只能有一個單冒號。

動態僞類

動態僞類只有當用戶和網站交互了才能體現出來。

1. :link：選擇全部未被點擊的鏈接
2. :visited：選擇已被點擊的鏈接
3. :hover：選擇懸停其上的鏈接
4. :active：選擇已經其上按下、尚未釋放的鏈接
5. :focus：選擇得到當前焦點的鏈接

:hover在IE6下只有a元素支持，:active、:focus只有IE7-6不支持。

因爲CSS優先級的關係(後面比前面的優先級高)，在寫a的CSS時，必定要按照a:link， a:visited， a:hover， a:actived的順序書寫。

Form元素僞類選擇器

1. :enabled 選擇器選取全部啓用的表單元素。
2. :disabled 選擇器選取全部禁用的表單元素。
3. :checked 選擇器選取全部選中的複選框或單選按鈕。

通常選取表單元素，因此咱們聯想到屬性選擇性，因此咱們能夠以下選取文本框

input[type="text"]:disabled {color:#333;}

其餘僞類選擇器

1. 語言僞類:lang()：一個基於它的語言的元素
2. :first-child：選擇父元素中的第一個子元素
3. :first-line：選擇元素中的第一行
4. :first-letter：選擇元素中的第一個字母
5. :before：元素以前插入生成的內容，如 div:before{content:"這裏寫你想要在以前插入的內容"}
6. :after：元素以前插入生成的內容，如 div:after{content:"這裏寫你想要在以前插入的內容"}，咱們有用它來清除浮動

CSS3的高級僞類選擇器

1. :first-child ：選擇某個元素的第一個子元素；

   注意 :若是寫成:first-child 瀏覽器將自動解析成 *:first-child， * 是匹配全部元素，意思就是選擇第一個子元素；而若是寫成img:first-child，那麼條件則苛刻了，不只是要知足是第一個子元素並且必須是img元素，同時知足這兩個條件才能被選取 。
   除了IE6不支持，其餘瀏覽器都支持

2. :last-child ：選擇某個元素的最後一個子元素；

   注意 :若是寫成:last-child 瀏覽器將自動解析成 *:last-child，* 是匹配全部元素，意思就是選擇最後一個子元素；而若是寫成img:last-child，那麼條件則苛刻了，不只是要知足是最後第一個子元素並且必須是img元素，同時知足這兩個條件才能被選取，就是倒過來的:first-child 。 IE六、IE七、IE8不支持 ，其餘瀏覽器都支持

3. :first-of-type ：選擇一個上級元素下的第一個同類子元素；

   注意：若是寫成:first-of-type瀏覽器也將自動解析成 *:first-of-type，這個意思就是第一個子元素 即:first-of-type=:first-child；而若是寫成img:first-of-type，那就跟:first-child差異大了，意思是全部img集合裏的第一個元素。其實跟:first-of-type跟:first-child徹底是兩個概念
   IE六、IE七、IE8和FF3-瀏覽器不支持

4. :last-of-type ：選擇一個上級元素的最後一個同類子元素；

   注意：若是寫成:last-of-type瀏覽器也將自動解析成 *:last-of-type，這個意思就是第一個子元素 即:last-of-type=:last-child；而若是寫成img:last-of-type，那就跟:last-child差異大了，意思是全部img集合裏的第一個元素。其實跟:last-of-type跟:last-child徹底是兩個概念。
   IE六、IE七、IE8和FF3-瀏覽器不支持

5. :nth-child() ：選擇某個元素的一個或多個特定的子元素；

   注意：:nth-child()能夠定義它的值（值能夠是整數不能爲負數，也能夠是表達式），如div:nth-child(3)或者div:nth-child(n)，這裏的「n」只能是」n」，不能使用其餘字母代替。:nth-child(2n)=:nth-child(even),:nth-child(2n-1)=:nth-child(odd)。:nth-child(n+5)從第五個元素開始選擇，:nth-child(-n+5)選擇第5個前面的（跟:nth-child(n+5)相反）。:nth-child()前面帶不帶元素跟:first-child同樣道理，其實:first-child就是:nth-child的衍生，就專指第一個，而:nth-child是想選哪一個就選哪一個。
   IE六、IE七、IE8和FF3-瀏覽器不支持

6. :nth-last-child() ：選擇某個元素的一個或多個特定的子元素，從這個元素的最後一個子元素開始算；

   注意：:nth-last-child()是從元素的最後一個開始計算，計算方法跟:nth-child()是同樣的，具體區別不說了。
   IE六、IE七、IE8和FF3-瀏覽器不支持

7. :nth-of-type() ：選擇指定的元素；

   注意：:nth-of-type跟:nth-child的關係就比如:first-of-type跟first-child的關係，區別也不說了。
   IE六、IE七、IE8和FF3-瀏覽器不支持

8. :nth-last-of-type() ： 選擇指定的元素，從元素的最後一個開始計算；

   注意：就是:nth-of-type 倒着算，區別：略。 
   IE六、IE七、IE8和FF3-瀏覽器不支持

9.  nly-child ：選擇的元素是它的父元素的惟一一個了元素；

   ： 注意：  :only-child表明只包含一個子元素的div下的子元素,

   CSS屬性、僞類選擇器，CSS3選擇器

    :only-child就是*:only-child意思了，因此沒選擇就是隻包涵一個子集元素的那個子集 。
   IE六、IE七、IE8和FF3-瀏覽器不支持

10. only-of-type ： 選擇一個元素是它的上級元素的惟一一個相同類型的子元素；

    注意：p:only-of-type表明只包含一個p子元素的div下的p元素，就算那個父集有其餘元素的子集，只要不是 p 子集，p:only-of-type就能選中。
    IE六、IE七、IE8和FF3-瀏覽器不支持

11. :empty ：empty選擇的元素裏面沒有任何內容；

    注意：選擇沒有任何內容的元素 。
    IE六、IE七、IE8瀏覽器不支持:empty選擇器

12. :not ：否認選擇器；

    注意：就是排除某個元素，input:not([type="submit"]) {border:0;} 。
    IE六、IE七、IE8瀏覽器不支持:empty選擇器

CSS4 選擇器

CSS4選擇器預覽版提供了對於父選擇器和匹配選擇器，跟js操做DOM同樣。只是出了草案，目前瀏覽器還不支持，因此就不試驗了，等支持了再加在這。

CSS4選擇器站位編輯！

摘自：http://www.html5jscss.com/css-selectors-34.html