css學習15 結構性偽類選擇器

2021-10-19 08:33:30 字數 1070 閱讀 2072

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 得到的效...