利用 CSS3 选择器做取模运算

本来是想翻译这篇文章 Using CSS Mod Queries with Range Selectors 的,可是发现已经有大神翻译了 使用CSS Mod Queries控制选择器范围, 不过我认为标题应该是: "利用CSS3选择器做取模运算"

所以我这里就不在翻译了而是来记录和总结一下里面一些原理。

之前我也一篇相关的博文:纯CSS实现响应式正方形 & nth-last-child 等选择器的应用

范围选择器

为了达到取模的目的,是必须使用到范围选择器的,也就是 :nth 开头的选择器。

nth-child()

nth-child(an+b) 匹配在文档树中前面有an+b-1个兄弟元素的元素,此时n大于或等于0,并且该元素具有父元素。简而言之,该选择器 匹配多个位置满足an+b的子元素

demo

规律总结

对于 nth-child(an+b) 中的 an+b:

  • a=0 时,选择第b个拥有父元素的元素。
  • a=1 时,选择第b个及 往后 的拥有父元素的元素。
  • a=-1 时,选择第b个及 往前 的拥有父元素的元素。

多个 nth-child() 选择器一起使用可以组成一个范围选择器:

例如:

:nth-child(n+4):nth-child(-n+8) 选择第4到8个(闭区间)拥有父元素的元素。

:nth-child(3n+1):nth-child(even) 选择第 1, 4, 7, 10 个拥有父元素的元素中是序号是基数的,即 1 和 7。

nth-of-type()

nth-of-type(an+b) 匹配在文档树中前面有 an+b-1个相同标签名 兄弟元素的元素,此时n大于或等于0,并且该元素具有父元素。

看起来 nth-of-type()nth-child 是差不多的东西,它们之间有什么差别?请继续往下看:

nth-child() 和 nth-of-type()

p:nth-child(2) { color: red; }

翻译过来的大白话是:

  1. 是一个 p 元素
  2. 是其父亲元素的第二个子元素

p:nth-of-type(2) { color: red; }

翻译过来的大白话是:

  1. 选择其父亲元素的第二个 p 子元素
<section>
   <h1>Words</h1>
   <p>Little</p>
   <p>Piggy</p>    <!-- 我们要选中这个 -->
</section>

可以这样写:

p:nth-of-type(2) {
  color: red;
}

或者

p:nth-child(3) {
  color: red;
}

都是可以的。所以大家看明白了么?

原文例子解析

原文首先提到的第一个例子是:

/*选择列表中所有能被3整除的列表*/
li:nth-last-child(3n):first-child,
li:nth-last-child(3n):first-child ~ li {

}

nth-last-child() 和 first-child()

:nth-last-child 匹配在文档树中后面有 an+b-1 个兄弟元素的元素,此时n大于或等于0,并且该元素具有父元素。

实际上,该伪类的作用与:nth-child相同,但是其是 从后往前 选择元素,而不是从前往后。

:first-child 代表了某个元素,这个元素是它父元素的的 第一个子元素 .

CSS 属性选择器混合使用的顺序问题

对于浏览器来说,解析 CSS 规则的时候其实是 从右往左 来逐个解析选择器的。

开始解释例子

对于 li:nth-last-child(3n):first-child ~ li 来说,翻译过来就是:

  1. 获取文档树中所有 li 元素(#1);

  2. 1 元素需要是下面提到的 # 2 元素的兄弟元素,并且在文档树中在 # 2 元素后面;

  3. 2 元素是从后面数起第 3n 个 li 元素并且它是其父元素的第一个子元素。

再简单一点就是:

选择是其父元素倒数第 3n 个和同时也是第一个元素的 li 元素的后面所有的兄弟 li 元素。

说得够清楚了吧,但是还差了一个 是其父元素倒数第 3n 个和同时也是第一个元素的 li 元素 ,所以我们还要把它选上,就得到了:

li:nth-last-child(3n):first-child,
li:nth-last-child(3n):first-child ~ li {

}

原文中的其他例子基本上到这里就可以都看懂啦~

参考资料:

Mastering the :nth-child

The Difference Between :nth-child and :nth-of-type

CSS3选择器:nth-child和:nth-of-type之间的差异

CSS combinator precedence?

« 返回