nth-child 实用技巧

最新推荐文章于 2024-05-16 14:52:25 发布

关于0318

最新推荐文章于 2024-05-16 14:52:25 发布

阅读量6.4k

点赞数 4

分类专栏： web前端

本文链接：https://blog.csdn.net/csdn372301467/article/details/86509083

版权

nth-child 是 CSS 里，一个不太注目、但在某些场景下很实用的选择器，本文记录码者搬砖过程中使用 nth-child 的一些案例。

选择器是什么

类似：

#container => 选择页面上 id 为 container 的元素
.wrapper => 选择别面上 class 为 wrapper 的元素
p => 选择页面上所有 p 元素
…

nth-child 同以上这些一样，只不过没那么常见。

如何使用

案例一

nth-child 是一个伪类选择器，选择的结果是某种元素的第 n 个子元素。
类似 hover，要在它前面加个冒号
具体写法是 .item:nth-child(2)，表示选择 class 为 item 且是父元素中第二个子元素的目标

案例一

<style>
.item{
    
  background: #000;
  margin: 10px;
  height: 50px;
}
.item:nth-child(2){
    
  background: #f00;
}
</style>
<body>
  <div class="wrapper">
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
  </div>
</body>

注子元素从第一个开始而不是第零个

案例二

nth-child 的括号里还支持一个表达式
比如 .item:nth-child(2n+1)代表：class 为 item、且在父元素的排在第 2n+1 个的元素（n 取值为：0，1，2，3，…）也就是第奇数个元素

案例二

<style>
.item{
    
  background: #000;
  margin: 10px;
  height: 50px;
}
.item:nth-child(2n+1){
    
  background: #f00;
}
</style>
<body>
  <div class="wrapper">
    <div class="item"></div> 
    <div class

最低0.47元/天解锁文章

关于0318

关注

4
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
nth-child 实用技巧

nth-child 是 CSS 里，一个不太注目、但在某些场景下很实用的选择器，本文记录码者搬砖过程中使用 nth-child 的一些案例。选择器是什么类似：#container 选择页面上 id 为 container 的元素.wrapper 选择别面上 class 为 wrapper 的元素p 选择页面上所有 p 元素…nth-child 同以上这些一样，只不过没那么常见...
复制链接

扫一扫