css3選擇器認識及用法總結

在講述css3選擇器以前，咱們先來大概的瞭解一下css3的發展史，這樣你們就知道所謂的css3究竟是什麼了。

HTML的誕生於20世紀90年代初，1996年末，CSS初版誕生，1998年5月，CSS2正式發佈，2004年，CSS2.1發佈，2002-2010年，陸續發佈部分css3新增屬性。

CSS1 中定義了網頁的基本屬性：字體、顏色、基本選擇器等。

CSS2中在CSS1的基礎上添加了高級功能，浮動和定位、高級選擇器等(子選擇器、相鄰選擇器、通用選擇器)。

CSS3遵循的是模塊化開發。發佈時間並非一個時間點，而是一個時間段。

1、css選擇器回顧：

（1）通用選擇器：*  選擇到全部的元素；
（2）選擇子元素：> 選擇到元素的直接後代
（3）相鄰兄弟選擇器：+ 選擇到緊隨目標元素後的第一個元素
（4）普通兄弟選擇器：~ 選擇到緊隨其後的全部兄弟元素
（5）僞元素選擇器：
（6）::first-line 匹配文本塊的首行
（7）::first-letter 選擇文本塊的首字母
（8）僞類選擇器：:before,:after在元素內容前面、後面添加內容(至關於行內元素)

例如：選中ul標籤後邊的第一個div相鄰標籤： ul.list +div.box

2、css3結構選擇器：

（1）:nth-child 選擇指定索引處的子元素
（2）nth-child(n) 父元素下的第n個子元素
（3）nth-child(odd)奇數子元素(同nth-child(2n-1))
（4）nth-child(even)偶數子元素(同nth-child(2n))
（5）nth-child(an+b)公式
（6）:nth-last-child(n) 倒數第n個子元素
（7）:nth-of-type(n) 父元素下的第n個指定類型的子元素
（7）:nth-last-of-type 父元素下的倒數第n個指定類型的子元素
（8）:first-child 選擇父元素下的第一個子元素
（9）:last-child 選擇父元素下的最後一個子元素
（10）:only-child 選擇父元素下惟一的子元素
（11）:only-of-type選擇父元素下指定類型的惟一子元素
（12）:root 選擇文檔的根目錄，返回html

例如：選中ul標籤裏邊的第三個li子元素： ul li:nth-child(3)

3、css3屬性選擇器：

（1）E[attr] 屬性名，不肯定具體屬性值
（2）E[attr="value"] 指定屬性名，並指定其對應屬性值
（3）E[attr ~="value"] 指定屬性名，其具備多個屬性值空格隔開，幷包含  value值
（4）E[attr ^= "value"] 指定屬性名，屬性值以value開頭
（5）E[attr $="value"] 指定屬性名，屬性值以value結束
（6）E[attr *="value"] 指定了屬性名，屬性值中包含了value
（7）E[attr |= "value"] 指定屬性名，屬性值以value-開頭

例如：選中全部的class類而且以類型是指定的value的div元素，讓他的背景顏色變成紅色。
div[class="value"]{background:red}

4、css3僞類選擇器：

一、UI僞類選擇器：

 （1）:enabled 選擇啓用狀態元素
 （2）:disabled 選擇禁用狀態元素
 （3）:checked 選擇被選中的input元素（單選按鈕或複選框）
 （4）:default 選擇默認元素
 （5）:valid、invalid 根據輸入驗證選擇有效或無效的input元素
 （6）:in-range、out-of-range 選擇指定範圍以內或者以外受限的元素
 （7）:repuired、optional 根據是否容許:required屬性選擇input元素

例如：有3個input複選框，其中第一個被選中了，它的checked="checked"，其餘兩個沒有，那麼讓這個被選中的複選框的寬高都變成50px。
input:checked{width:50px;height:50px}

二、動態僞類選擇器：

（1）:link 選擇連接元素
 （2）:visited 選擇用戶以訪問的元素
 （3）:hover 鼠標懸停其上的元素
 （4）:ative 鼠標點擊時觸發的事件
 （5）:focus 當前獲取焦點的元素

例如：滑過一個div的時候，讓它的背景顏色變成紅色。
div:hover{background:red}

三、其餘僞類選擇器：

（1）:not(<選擇器>) 對括號內選擇器的選擇取反
（2）:lang(<目標語言>) 基於lang全局屬性的元素
（3）:target url片斷標識符指向的元素
（4）:empty選擇內容爲空的元素
（5）:selection 鼠標光標選擇元素內容

例如：有3個div，前兩個都有內容，第三個是空的，什麼內容都沒有，那麼讓這個空的div的背景顏色變成橙色。div:empty{background:orange}