标签元素选择器 - CSS 笔记

当在同一个盒子里有两个相同标签的元素，我们该如何选择呢？

• 参考链接：详情

1
<div class="box">
2
<p>Npcink</p>
3
<p>Muze</p>
4
<p>nono</p>
5
</div>

第一个子元素

1
.box p:first-child {}

第二个子元素

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

第三个元素

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

最后一个子元素

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

扩展

一种组合用法

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