【CSS】nth-child 與 nth-of-type

早上聽到旁邊的同學在討論這個問題,有時候會遇到使用nth-child沒反應的狀況,如今是該釐清的時候了。

<div class="container">
<h2>Hello</h2>
<ul class="ul01">
<li>1</li>
<li>2</li>
</ul>
<ul class="ul02">
<li>3</li>
<li>4</li>
<li>
<span>span1</span>
<span>span2</span>
</li>
</ul>
</div>

.container ul:nth-child(2) {
background-color: red;
}

現在有一段程式碼,原本我預期的狀況ul02會吃到底色,因為我選擇的是container下第二個ul,但吃到底色的ul01
為什麼呢?因為nth-child在數 DOM 元素的時候不看 tag ,意思就是他在數元素的時候不會幫你過濾元素 type 。

假設我們將 CSS 選擇器更改為 .container ul:nth-child(1),會發現沒有元素吃到 CSS,因為他選擇的是container下的第一個元素,而且必須為ul
換句話說在container下的第一個元素如果不是ul,他就不會吃到 CSS, 在container下第一個元素是h2,所以他不會吃到 CSS ,如果你希望選擇container下第一個ul,必須使用.container ul:nth-of-type(1)

對於後代選擇器使用nth-child也有一個很特殊的發現,如果選擇器更改為.container :nth-child(2).container *:nth-child(2),你會發現從container開始各階層下的第二個元素都會被選擇到。
如果更改為.container *:nth-of-type(2),各元素類型的第二個選擇器會被選擇到。

這邊要注意的是,of-type選擇器會以元素類型做區隔,而nth-child會計算到所有元素。

【JS】事件循環 Event-loop 【Github】不開 branch 使用 github page

評論

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×