標簽元素選擇器 - CSS筆記

當在同一個盒子里有兩個相同標簽的元素，我們該如何選擇呢？

• 參考鏈接：詳情

<div class="box">
<p>Npcink</p>
<p>Muze</p>
<p>nono</p>
</div>

第一個子元素

.box p:first-child {}

第二個子元素

.box p:nth-child(2) {}

第三個元素

.box p:nth-child(3) {}

最后一個子元素

.box p:last-child {}

CSS3 nth-child()選擇前幾個元素

• 原文來源：詳情

一、選擇列表中的偶數標簽 ?:nth-child(2n)

二、選擇列表中的奇數標簽 ?:nth-child(2n-1)

三、選擇從第6個開始的，直到最后:nth-child(n+6)

四、選擇第1個到第6個?:nth-child(-n+6)

一、兩者結合使用，可以限制選擇某一個范圍，選擇第6個到第9個 ?:nth-child(n+6):nth-child(-n+9)

擴展

一種組合用法

#rates .row-bg:nth-child(2) .el::after {content:"少"}