CSS3:nth-child(x) 选择器

来源：互联网发布：我的淘宝没有我要开店编辑：程序博客网时间：2024/06/05 09:37

第一次看到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没毛病

阅读全文

0 0