表單選擇器：

/*:enabled 可用的 :disabled 被禁用的 :focus 獲取了焦點的 多用在表單元素上*/ input:enabled {...} input:disabled {...} input:focus {...}

屬性選擇器：

/*[attribute] [attribute=value] 選擇具有對應屬性的元素 即使此屬性沒有實際作用*/ a[target] {...} a[target=_blank] {...}

次序選擇器：

:first-child 選取屬于其父元素的首個子元素
:last-child 選取屬于其父元素的最后一個子元素
:nth-child(n) 選取父元素的第n個子元素
:nth-last-child(n) 倒序選取父元素的第n個子元素

/*計算次序時不考慮類型，但如果符合次序的元素跟選擇器的類型不匹配，則不會被選取*/ ul li:first-child {...} p:nth-child(odd) {...} p:nth-child(even) {...} p:nth-last-child(2) {...}

:first-of-type 父元素的特定類型的首個子元素的每個元素
:last-of-type 父元素的特定類型的首個子元素的每個元素
:nth-of-type(n) 父元素的特定類型的第n個子元素
:nth-last-of-type(n) 父元素的特定類型的第n個子元素的每個元素，從最后一個子元素開始計數

/*只對類型匹配的元素進行次序計算*/ ul li:first-of-type {...} p:last-of-type {...} p:nth-of-type(2) {...}

?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的CSS3 选择器用法小结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。