CSS 偽類選擇器（未完待續。。。）

2021-09-12 16:42:40 字數 1136 閱讀 3511

:nth-of-type() && :nth-child()區別

第1-1個p元素


第2-1個p元素


第2-1個section元素


第2-2個p元素


第2-3個p元素


第1-2個section元素


第1-3個section元素


第1-4個section元素


第1-2個p元素


第1-3個p元素


section > p, section > section 


p:nth-of-type(2)


p:nth-child(2)


p.info:nth-of-type(2)
結果：p:nth-child(2) 無效

p:nth-of-type(2): 匹配父節點下的第二個是p的子節點

p:nth-child(2)： 匹配父節點下第二個子節點同時第二個子節點為p

注意點

2-1


2-2 45


.foo:nth-of-type(2)
效果：類名順序失效, 匹配每一級同乙個型別的第二個標籤且類名為foo的。

滿足:nth-of-type(2)結果的為2-2

和，但是不匹配類名為foo，所以最後匹配結果為2-2

p.foo:nth-of-type(3)
結果：類名順序失效, 匹配每一級第三個p標籤且p標籤類名為foo的。

匹配所有父級是的元素

匹配所有緊接著元素之後的元素

CSS 偽類選擇器（未完待續。。。）

nth of type nth child 區別 第1 1個p元素 第2 1個p元素 第2 1個section元素 第2 2個p元素 第2 3個p元素 第1 2個section元素 第1 3個section元素 第1 4個section元素 第1 2個p元素 第1 3個p元素 section p,s...

CSS 偽類選擇器（未完待續。。。）

nth of type nth child 區別 第1 1個p元素 第2 1個p元素 第2 1個section元素 第2 2個p元素 第2 3個p元素 第1 2個section元素 第1 3個section元素 第1 4個section元素 第1 2個p元素 第1 3個p元素 section p,s...

css樣式 未完待續

1子選擇器 h1 strong 只有第一行h1中的very very字型會變紅，注意第二行中的very是不會的，類似於，直接後代與不是直接後代這樣的關係 2 後代選擇器 h1 em 第二行h1中的em包含的元素realy和strong包含的元素very都會有紅色字型，注意與之選擇器的異同，即無論是多...