(?<=p)与:nth-child()的相似性分析

原创 老姚 随笔 2019年 109阅读 2019-01-04 16:36:43 举报

标题挺有意思吧,一个来自正则,一个来自 CSS

前者是正则断言,后者是 CSS 选择器。

正则是用来做什么的?匹配字符的。

选择器是用来做什么的?匹配元素的。

既然都是用来“匹配”的,那么,如果二者在一些地方有什么相似之处,应不足为奇。

我发现 (?<=p):nth-child() 就有很强的相似性。

这里容我慢慢道来。

本文假设读者对 CSS 选择器更熟悉些,所以下面的例子都是先 CSS,后正则。

1. 匹配所有元素

假设页面上有 9li,让所有元素的字都变成红色。此处不会使用 :nth-child 的,直接用标签选择器就行了。


同样的,正则这边也不需要使用 (?<=p)

2. 匹配第1个元素

匹配首元素,在CSS 可以用 :first-child 选择器:


而正则可以使用 ^ 位置匹配符:

而我们知道 :first-child 其实是 :nth-child 的特例:

相应的,正则其实也可以用 (?<=p)

(?<=^) 断言其实匹配的是一个位置,^ 之后的位置,当然还是开头。可以参考《JS正则迷你书》对位置的讲解。

3. 匹配第3个元素

CSS 里要匹配第 3 个元素,:nth-child(3) 即可


而正则这边呢?这里需要转个弯,要匹配第 3 个,其实是说该字符前面还有 2 个:

4. 匹配前3个元素

我们知道 :nth-child 选择器厉害之处是在于它支持 an+b 表达式,比如匹配前 3 个:


正则这边,要匹配的字符前面有 02 个字符,

5. 匹配奇数位

CSS 这边使用 2n+1


正则这边,要匹配的字符前面有 024...个字符,

类似的匹配偶数位,即要匹配的字符前面有 135...个字符:

6. 更一般的 an+b

比如 CSS 这边使用 4n+3

正则这边变成了:

即:要匹配的字符前面还有 4n+2 个字符

7. (?=p) 与 :nth-last-child

我们知道 :nth-child 还有对应的 :nth-last-child。它的意思是,与 :nth-child 相反,不是从前往后数,而是从后面向前数,比如要匹配后 3li


正则这边呢?(?<=p) 表示 p 后面的位置,与之相对的是 (?=p),表示 p 前面的位置。因此要匹配后 3 个字符:

更多的,与前几条类似,这里就不写了。

8. (?<!p) 与 :not(:nth-child())

CSS 中,要匹配除了第 3 个元素之外的所有元素,可以配合使用 :not选择器来实现“补集”。


(?<=p) 表示 p 后面的位置。而 (?<!p) 有点绕,它表示所有位置中,不是 p 后面的那个位置,或者说当下位置的前面不是 p

9. :nth-child(n+3):nth-child(-n+7)

:nth-child 除了取补,还可以取交集,比如匹配第 3-7 个元素


(?<=p) 也可以支持交集的

交并补,还有并集,CSS 很简单:


正则呢,有 | 就是来做这个:

自此,这么一条条看下来,发现了二者确实有多相似之处。

这种跨界比较,我觉得很有趣!

本文完。

另外,欢迎继续阅读本人的《JS正则迷你书》

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复