屬性選擇器

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

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

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

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

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

[title^='hello']:屬性以hello開頭的任意字符

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

[title^='hello'][title$='.py']:選擇屬性以hello開頭并且以.py結束的元素

連結符

h1~p:選擇h1元素后面的所有同級p元素

p~p:選擇p元素后面的所有同級p元素，除了第一個p元素

h1+p:選擇h1元素后面的第一個同級p元素

偽類選擇器

nth系列,數(shù)字

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

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

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

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

通過(-n+number)來指定選擇前幾個元素

-n會向負數(shù)方向增加先從0開始,-1,-2,-3...

使用:nth-child(odd)或:nth-child(even)實現(xiàn)隔行變色。
 
單個選擇

first-child:選擇第一個元素，按位置
first-of-type:選擇第一個元素，按類型

last-child:選擇最后一個元素，按位置
last-of-type:選擇最后一個元素，按類型

only-child:沒有其他兄弟元素的時候會被選中
only-of-type:可以有兄弟元素但要類型不同

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

偽類:target

通過:target來模擬點擊事件

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

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

使用target偽類，可以輕松地突出顯示用戶要閱讀的評論

利用target制作的tab切換，當然它還是有很多缺陷的，不過大家可以通過它擴展擴展。

:empty

選擇沒有子元素并且沒有文本節(jié)點的元素

:root

選擇根元素，在HTML中root永遠是html元素

:not

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

:optional

選擇不是必須填寫的input元素

也就是獲取到input沒有加required屬性的元素

:required

選擇有加required屬性的元素

:read-write

獲取可讀寫的input元素

:read-only

獲取只可讀的input元素

:out-of-range

以上這篇對CSS3選擇器的研究(詳解)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論