标签元素选择器 - 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:"少"}