关于nth-child，你还应该知道这些！！！

最新推荐文章于 2023-06-30 17:24:14 发布
最新推荐文章于 2023-06-30 17:24:14 发布
阅读量240 收藏
点赞数
分类专栏： 问答--问题解答
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ICY___/article/details/100111919
版权
  • nth-child（n）中的n可以用数学中的n来理解，所以这之间就有了千变万化。

如可以去判断奇偶（2n）（2n+1）

判断第一列关系，第一行关系之类

这无疑给我们带来的更多的方便

ICY___
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解CSS3中nth-child与nth-of-type的区别
09-24
在css3中有两个新的选择器可以选择父元素下对应的子元素，一个是:nth-child 另一个是:nth-of-type。 但是它们到底有什么区别呢？下面这篇文章主要就给介绍了CSS3中nth-child与nth-of-type的区别,需要的朋友可以参考...
伪类:nth-child()和:nth-of-type()最简单的区分、理解
Zeng__Yi的博客
08-12 6355
:nth-child()和:nth-of-type()常见的取值有： 数字（1,2,3....），倍数（2n，3n....），奇数（odd），偶数（even） 本文的实例代码：主要为1个不带有li类的div标签，三个带有li类h1、h2、p、div <div class="box"> <div>这是没有.li的div</div> &lt...
nth-child的使用方法
热门推荐
Evan's Blog ٩(๑❛ᴗ❛๑)۶
06-09 8万+
一、需求描述 在开发过程中，会碰到一些选择器的需求： 例如使列表中的第一项或者最后一项显示不同的样式 、列表中的奇数或者偶数项显示不同的背景色 . . . 等等。 我们可以通过 CSS 来实现这样的效果，CSS 给我们提供了几个样式参数：first-child、last-child、nth-child(n)。 二、使用方法的代码示例 1.常见使用方法 first-child first-child：选择列表中的第一个标签。 举例：第一行字体显示为红色，代码如下： li:first-child{ c
nth-child选择器 | 属性选择器详解
GR6080的博客
01-06 1万+
前端的兄弟想必都接触过CSS中一个神奇的玩意，不用添加class名可以轻松获取你想要的标签并给与修改添加样式，是不是很给力，它就是：nth-child 与 属性选择器
【CSS】nth:children以及浏览器内核webkit使用（滚动条样式修改）
最新发布
嗨，朋友你好！我是前端领域的工作者
06-30 2812
【CSS】nth:children以及浏览器内核webkit使用（滚动条样式修改）
CSS中的nth-child()属性
欢欢的博客
10-27 3万+
first-child、last-child、nth-child、nth-last-child、nth-of-type first-child，last-child可直接使用，例如 ul li:first-child，ul li:last-child， 但是其余的选择都需要在后面加入()，例如ul li:nth-child(n); ->选中ul元素下面第n个li元素，且n是从1开始的，这里和JavaScript中的eq()不同，eq选择也是从第1个开始的，但是索引值是从0开始 1、fi...
jQuery中:nth-child选择器用法实例
12-04
本文实例讲述了jQuery中:nth-child选择器用法。分享给大家供大家参考。具体分析如下： 此选择器匹配其父元素下的第N个子或奇偶元素。 :eq(index)选择器只匹配一个元素，而:nth-child选择器将为每一个父元素匹配子...
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
11-21
一、代码 <style> ul{list-style: none} ...div ul li:nth-child(1){background:#f00;} div ul li:nth-child(3){background:#ccc;} </style> <li>11 <li>22 <li>33 二、预览效果 如上图
详解CSS nth-child与nth-of-type的元素查找方式
01-19
nth-child和nth-of-type是css的两个伪选择符。应用中，这两者常常容易混淆。这里把它们拿出来仔细做个对比，看看这两者是怎么查找元素的。 nth-child(n) —— 寻找第n个子元素 nth-of-type(n) —— 寻找同一类型...
css3 :nth-child()选择器的使用
weixin_30505043的博客
06-08 266
一、nth-child() 1. nth-child(n)：父元素下的第n个子元素，n>0，索引从1开始。不区分子元素类型。 2. nth-child(odd)：父元素下的奇数子元素，等同于：nth-child(2n-1)。区分子元素类型。 3. ntn-child(even)：父元素下的偶数子元素，等同于：nth-child(2n)。区分子元素类型。 4. nth-child(an...
nth:child()选择器
qq_46241430的博客
04-04 1337
:nth-child()的理解和使用
css选择器:nth-child()的用法
得意小门生的博客
10-13 6万+
:nth-child() :nth-child() 选择器，该选择器选取父元素的第 N 个子元素，与类型无关。 一、选择列表中的偶数标签: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) :nth-last-chil
几张图浅理解（会用） :nth-child()
a666666000的博客
09-20 1776
几张图带你浅理解（会用） :nth-child()
CSS3 :nth-child() 选择器,css选择器
qq_47443027的博客
04-28 2068
一、nth-child() 1. nth-child(n)：父元素下的第n个子元素，n>0，索引从1开始。不区分子元素类型。 2. nth-child(odd)：父元素下的奇数子元素，等同于：nth-child(2n-1)。区分子元素类型。 3. ntn-child(even)：父元素下的偶数子元素，等同于：nth-child(2n)。区分子元素类型。 4. nth-child(an+b)：父元素的an+b个子元素，区分子元素类型。 5. first-child：父元素下的第一个子元素，如果
CSS3新增选择器 nth-child(){}，盒子阴影、文字阴影，背景，浏览器内核与前缀
qq_60839348的博客
11-28 828
CSS3新增选择器 nth-child(){}，盒子阴影、文字阴影，背景，浏览器内核与前缀
详解CSS3中:nth-child的用法
z983002710的博客
06-30 1万+
详解CSS3中:nth-child的用法
表格奇偶行变色
zwj1030711290的CSDN
12-16 1419
表格的行间隔变色 有如下种方式 方式一:使用纯css table.dictionaryList tr:nth-child(2n+1){ background-color:#c0e0f7;}table.dictionaryList tr:nth-child(2n+0){ background-color:#defcfe;} 说明 :n从零开始:0,1,2,3....
css3--nth-child的用法
m0_58065010的博客
06-08 2292
选择器查看的是元素在其父元素中的位置，而不是它在文档中的位置或它在其类别中的位置。所以，如果你有一个列表，它包含两种不同的类元素，希望这篇文章能帮助你更好地理解这个强大的选择器，并在你的下一个项目中找到它的用途。选择器是一个强大的工具，允许我们根据它们在父元素中的位置选择元素。是从1开始计数的（在HTML中，第一个元素的索引为1），但在。实际上不会选择任何第0个子元素，因为没有第0个子元素。是一个整数，表示要选择的子元素的位置。会考虑所有的子元素，而不仅仅是特定的类别。实际上在选择所有偶数位置的元素，而。
nth-child 和nth-type
03-16
"nth-child" 和 "nth-of-type" 都是 CSS 选择器中的伪类选择器，用于选择父元素的特定子元素。 其中，“nth-child”选择器可以匹配父元素中所有的子元素，而“nth-of-type”选择器只会匹配父元素中相同类型的子元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值