CSS3常用的幾種選取器

在20世紀90年代初HTML誕生後，在96年底就有CSS誕生了，CSS是專門定義網頁的基本屬性的，那麼在CSS3中，常用的選取器有哪些？今天就給大家介紹一下。

HTML的誕生 20世紀90年代初

1996年底， CSS第一版誕生

1998年5月 CSS2正式發布

2004年 CSS2.1發布

CSS3的發布 2002 2003 2004 2005 2007 2009 2010

模組化開發

CSS1 中定義了網頁的基本屬性：

字型、顏色、基本選取器等

CSS2中在CSS1的基礎上添加了進階功能

浮動和定位、進階選取器等(子選取器、相鄰選取器、通用選取器)

CSS3遵循的是模組化開發。發布時間並不是一個時間點，而是一個時間段。

通用選取器：* 選擇到所有的元素

選擇子項目：> 選擇到元素的直接後代

相鄰兄弟選取器：+ 選擇到緊隨目標元素後的第一個元素

普通兄弟選取器：~ 選擇到緊隨其後的所有兄弟元素

:nth-child 選擇指定索引處的子項目

nth-child(n) 父元素下的第n個子項目

nth-child(odd)奇數子項目

nth-child(even)偶數子項目

:nth-last-child(n) 倒數第n個子項目

:nth-of-type(n) 父元素下的第n個指定類型的子項目

:nth-last-of-type父元素下的倒數第n個指定類型的子項目

:first-child 選擇父元素下的第一個子項目

:last-child 選擇父元素下的最後一個子項目

:only-child 選擇父元素下唯一的子項目

:only-of-type選擇父元素下指定類型的唯一子項目

:root 選擇文檔的根目錄，返回html

E[attr] 屬性名稱，不確定具體屬性值

E[attr="value"] 指定屬性名稱，並指定其對應屬性值

E[attr ~="value"] 指定屬性名稱，其具有多個屬性值空格隔開，並包含 value值

E[attr ^= "value"] 指定屬性名稱，屬性值以value開頭

E[attr $="value"] 指定屬性名稱，屬性值以value結束

E[attr *="value"] 指定了屬性名稱，屬性值中包含了value

E[attr |= "value"] 指定屬性名稱，屬性值以value-開頭

UI偽類別選取器：

:enabled 選擇啟用狀態元素

:disabled 選擇禁用狀態元素

:checked 選擇被選中的input元素（選項按鈕或複選框）

:default 選擇預設元素

:valid、invalid 根據輸入驗證選擇有效或無效的input元素

:in-range、out-of-range 選擇指定範圍之內或者之外受限的元素

:repuired、optional 根據是否允許:required屬性選擇input元素

動態偽類別選取器：

:link 選擇連結元素

:visited 選擇使用者以訪問的元素

:hover 滑鼠移至上方其上的元素

:ative 滑鼠點擊時觸發的事件

:focus 當前擷取焦點的元素

其他偽類別選取器：

:not(<選取器>) 對括弧內選取器的選擇取反

:lang(<目標語言>) 基於lang全域屬性的元素

:target url片段標識符指向的元素

:empty選擇內容為空白的元素

:selection 滑鼠游標選擇元素內容

關於CSS3的選取器就是這些了，更多精彩請關注php中文網其它相關文章！

相關閱讀：

CSS3有哪些新增的背景屬性

怎麼用CSS3媒體查詢

css3的彈性盒怎麼做出來