css複習 結構性偽類

2021-08-09 08:11:32 字數 1196 閱讀 2163



p:nth-child(3)


style>
p:nth-child(n) 表示p元素的父級中的第n個子元素 並且這個子元素必須是p，否則沒有反應。



p:nth-last-child(2)


style>
p:nth-last-child(n) 表示p元素的父級中的第n個子元素 並且這個子元素必須是p 順序從後往前數。

p:nth-last-child(1) 會選中p父元素中的最後乙個子節點，並且這個子節點必須是p，否則沒有反應。



.list


:nth-of-type(1)


style>
p:nth-of-type(n) 表示p元素的父級中的第n個p元素。



p:nth-last-of-type(1)


style>
p:nth-of-type(n) 表示p元素的父級中的第n個p元素 順序從後往前數。



p:first-child


style>
p:first-child 表示p元素的父級中的第乙個子元素，並且這個元素必須是p



p:last-child


style>
p:last-child 表示p元素的父級中的最後乙個子元素，並且這個元素必須是p。



p:first-of-type


style>
p:first-of-type 表示p元素的父級中的第乙個p元素



p:last-of-type


style>
p:last-of-type 表示p元素的父級中的最後乙個p元素



h1:only-child


style>
h1:only-child 表示h1元素的父級中的唯一乙個元素，並且這個元素必須是h1（！不能有其他元素）



p:only-of-type


style>
p:only-of-type 表示p元素的父級中的唯一乙個p元素(父級中可以存在其他元素)

結構性偽類選擇器

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...

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

1 根元素選擇器 root選擇器匹配文件中的根元素。它可能是用得最少的乙個偽類選擇器,因為總是返回html元素。root 2 子元素選擇器 選擇器說明 first child 選取元素的第乙個子元素 last child 選取元素的最後乙個子元素 only child 選取元素的唯一乙個子元素 on...

結構性偽類選擇器 root

root選擇器，從字面上我們就可以很清楚的理解是根選擇器，他的意思就是匹配元素e所在文件的根元素。在html文件中，根元素始終是。示例演示 通過 root 選擇器設定背景顏色 html root選擇器的演示 css root演示結果 root 選擇器等同於元素，簡單點說 root html 得到的效...