CSS3:nth-child(x) 选择器

最新推荐文章于 2023-07-17 11:46:28 发布

S_clifftop

最新推荐文章于 2023-07-17 11:46:28 发布

阅读量712

点赞数

分类专栏： HTML_CSS 文章标签： css3

本文为博主原创文章，未经博主允许不得转载，博主空间https://blog.csdn.net/S_clifftop @13805064305

本文链接：https://blog.csdn.net/S_clifftop/article/details/73196277

版权

HTML_CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

第一次看到nth-child(x)(这位同学，其中x不是”x”是代表很多内容)，会不会很惊讶，如果不是做网页相关或者有“我要学习不要女朋友”这样的想法，一辈子都遇不到好吗？

废话不说了，开始：
1、x为任意常数

看W3C解释：表示属于其父元素的第x个子元素。
少年，不知道上面那句是什么意思？通俗点指所有此类标签同一级的第几个。觉得和没解释一样？没关系，我举个例子：

<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(2)
{
background:#ff0000;
}
</style>
</head>
<body>

<div>
  <p>1:1</p>
  <p>1:2</p>
</div>
<div>
  <p>2:1</p>
  <p>2:2</p>
  <p>2:3</p>
  <p>2:4</p>
</div>
<div>
  <p>3:1</p>
  <p>3:2</p>
</div>
</body>
</html>

运行后如下：
这里写图片描述

注意：
我也试了如下的样式：
div:nth-child(2){background:#ff0000;}
如果同级有h1-h6、p等块级元素，也会算做div，没有深入，只是提出来，如果错了可以给我说一声。

2、x为odd、even

看W3C解释：odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。
说到这就不用贴图了吧，如果选择的元素连续，背景色设odd为白，even为黑，可以想一下黑白相间，不要想大熊猫！！

3、x为(an+b)
W3C解释：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
如果x为(3n+2)，那么改变样式的标签为第2、5、8、11……这个很容易理解。

注意：
就如前面所说，如果同级有h1-h6、div、p等块级元素，会算作相同的元素。
打个比方：你只想查一列中黑人（div）的数量，同级插入了一个白人（p），你也会算进去，而不是只数黑人，比喻都是不恰当的，知道大体意思就好。

好了，看到这你也学会了，学无止境，如果有错误，请指出，谢谢，老铁双击666没毛病

S_clifftop

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3:nth-child(x) 选择器

第一次看到nth-child(x)(这位同学，其中x不是”x”是代表很多内容)，会不会很惊讶，如果不是做网页相关或者有“我要学习不要女朋友”这样的想法，一辈子都遇不到好吗？废话不说了，开始： 1、x为任意常数看W3C解释：表示属于其父元素的第x个子元素。少年，不知道上面那句是什么意思？通俗点指所有此类标签同一级的第几个。觉得和没解释一样？没关系，我举个例子：<!DOCTYPE html>
复制链接

扫一扫