标签元素选择器 - 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)

标签元素选择器 - CSS笔记-Npcink

二、选择列表中的奇数标签  :nth-child(2n-1)

标签元素选择器 - CSS笔记-Npcink

三、选择从第6个开始的,直到最后:nth-child(n+6)

标签元素选择器 - CSS笔记-Npcink

四、选择第1个到第6个 :nth-child(-n+6)

标签元素选择器 - CSS笔记-Npcink

一、两者结合使用,可以限制选择某一个范围,选择第6个到第9个  :nth-child(n+6):nth-child(-n+9)

标签元素选择器 - CSS笔记-Npcink

扩展

一种组合用法

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

有趣的心跳特效 - CSS笔记

2020-11-7 21:09:06

css

强制中文/整个英文单词自动换行与不换行 - CSS笔记

2020-12-8 19:32:03

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索