屬性選擇器

　　[title]:選擇帶有title屬性的元素

　　[title='hello']:選擇屬性是title并且值是hello的元素

　　[title~='hello']:選擇屬性是title并且部分值是hello的元素，hello需要是單獨(dú)的值，以空格分開(kāi)

　　[title*='hello']:選擇屬性是title并且其中包含了hello的元素

　　[title|='hello']:選擇屬性是title并且值是以hello開(kāi)頭并且允許hello后面以-的任意字符

　　[title^='hello']:屬性以hello開(kāi)頭的任意字符

　　[title$='hello']:屬性以hello結(jié)束的任意字符

　　[title^='hello'][title$='.py']:選擇屬性以hello開(kāi)頭并且以.py結(jié)束的元素

?

連結(jié)符

　　h1~p:選擇h1元素后面的所有同級(jí)p元素

　　p~p:選擇p元素后面的所有同級(jí)p元素，除了第一個(gè)p元素

　　h1+p:選擇h1元素后面的第一個(gè)同級(jí)p元素

?

偽類(lèi)選擇器

　　nth系列,數(shù)字

?

　　nth-child():按照位置來(lái)算數(shù)

　　nth-of-type():按照類(lèi)型來(lái)算數(shù)

　　nth-last-child():從末尾按照位置開(kāi)始算

　　nth-last-of-type():從末尾按照類(lèi)型來(lái)算數(shù)

　　通過(guò)(-n+number)來(lái)指定選擇前幾個(gè)元素

　　-n會(huì)向負(fù)數(shù)方向增加先從0開(kāi)始,-1,-2,-3...

　　使用:nth-child(odd)或:nth-child(even)實(shí)現(xiàn)隔行變色。

?

單個(gè)選擇

　　first-child:選擇第一個(gè)元素，按位置
　　first-of-type:選擇第一個(gè)元素，按類(lèi)型

?

　　last-child:選擇最后一個(gè)元素，按位置
　　last-of-type:選擇最后一個(gè)元素，按類(lèi)型

?

　　only-child:沒(méi)有其他兄弟元素的時(shí)候會(huì)被選中
　　only-of-type:可以有兄弟元素但要類(lèi)型不同

　　使用only-of-type可以讓你從其他類(lèi)型元素中挑選出一個(gè)元素來(lái)，反之only-child需要元素單獨(dú)存在才行。這個(gè)肯定有大作用，待發(fā)現(xiàn)。

?

偽類(lèi)

?

:target

　　通過(guò):target來(lái)模擬點(diǎn)擊事件

　　<a href="#a" id="a"></a>

　　利用target實(shí)現(xiàn)tab欄切換

　　使用target偽類(lèi)，可以輕松地突出顯示用戶(hù)要閱讀的評(píng)論

利用target制作的tab切換，當(dāng)然它還是有很多缺陷的，不過(guò)大家可以通過(guò)它擴(kuò)展擴(kuò)展。

:empty
　　選擇沒(méi)有子元素并且沒(méi)有文本節(jié)點(diǎn)的元素

:root
　　選擇根元素，在HTML中root永遠(yuǎn)是html元素

:not
　　參數(shù)支持傳遞一個(gè)元素甚至其他偽類(lèi)選擇器,但不支持傳遞連結(jié)符以及偽元素
　　選擇除了指定參數(shù)以外的任意元素

:optional

　　選擇不是必須填寫(xiě)的input元素

　　也就是獲取到input沒(méi)有加required屬性的元素

:required

　　選擇有加required屬性的元素

:read-write

　　獲取可讀寫(xiě)的input元素

:read-only

　　獲取只可讀的input元素

:out-of-range

　　當(dāng)input元素的值是超出范圍時(shí)，max和min限定的范圍

:valid

　　選擇所有合法的輸入，適用于表單元素有限制，如最小輸入元素和屬性的最大值，電子郵件具有合法的電子郵件，或者數(shù)值等數(shù)字字段。

?

元素狀態(tài)偽類(lèi)

:checked
　　當(dāng)checkbox被選中時(shí)

:disabled
　　當(dāng)元素被禁用時(shí)

:enabled
　　當(dāng)元素沒(méi)有被禁用時(shí)

?

偽元素

::first-line
　　選擇第一行文字

::first-letter
　　選擇第一個(gè)字

::after
　　在元素末尾添加一個(gè)偽元素

::before
　　在元素開(kāi)頭添加一個(gè)偽元素

::selection
　　應(yīng)用到選中的文本上

?

合理利用這些選擇器，可以幫你解決很多問(wèn)題，目前還在研究中，本篇內(nèi)容長(zhǎng)期更新。

轉(zhuǎn)載于:https://www.cnblogs.com/pssp/p/5873926.html

總結(jié)

以上是生活随笔為你收集整理的CSS3选择器的研究的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。