1、根元素選擇器
:root選擇器匹配文件中的根元素。它可能是用得最少的乙個偽類選擇器,因為總是返回html元素。
:root
2、子元素選擇器
選擇器說明
:first-child
選取元素的第乙個子元素
:last-child
選取元素的最後乙個子元素
:only-child
選取元素的唯一乙個子元素
:only-of-type
選取屬於父元素的特定型別的唯一子元素
2.1 :first-child選擇器
:first-child選擇器匹配由包含它們的元素(即父元素)定義的第乙個子元素。
:first-child
會匹配任意元素的第乙個子元素。
2.2 :last-child選擇器
:last-child選擇器匹配由包含它們的元素定義的最後乙個元素。
:last-child
2.3 :only-child選擇器
:only-child選擇器匹配父元素包含的唯一子元素。
:only-child
2.4 :only-of-type選擇器
:only-of-type 代表了任意乙個元素,這個元素沒有其他相同型別的兄弟元素。
:only-of-type
3、:nth-child選擇器
:nth-child選擇器跟上一節講的子元素選擇器類似,但使用這類選擇器可以指定乙個索引以匹配特定位置的元素。
選擇器說明
:nth-child(n)
選取父元素的第n個子元素
:nth-last-child(n)
選取父元素的倒數第n個子元素
:nth-of-type(n)
選取屬於父元素的特定型別的第n個子元素
:nth-last-of-type(n)
選取屬於父元素的特定型別的倒數第n個子元素
結構性偽類選擇器
doctype html html lang en head title 結構性偽類選擇器 title meta charset utf 8 meta name viewport content width device width,initial scale 1 style a hover fir...
CSS3選擇器 結構性偽類選擇器
在學習結構性偽類選擇器之前,先了解2個概念 css中的偽類選擇器和偽元素 1 偽類選擇器 css中已經定義好的選擇器,不能隨便取名 常用的偽類選擇器是使用在a元素上的幾種,如a link a visited a hover a active 2 偽元素選擇器 並不是針對真正的元素使用的選擇器,而是針...
結構性偽類選擇器 root
root選擇器,從字面上我們就可以很清楚的理解是根選擇器,他的意思就是匹配元素e所在文件的根元素。在html文件中,根元素始終是。示例演示 通過 root 選擇器設定背景顏色 html root選擇器的演示 css root演示結果 root 選擇器等同於元素,簡單點說 root html 得到的效...