css - 一个 CSS 选择器可以有多长？

Question

一个CSS选择器可以有多长？

我对“规范”所说的内容不太感兴趣，而是对浏览器实际可以处理的内容感兴趣。到目前为止，我只知道一种浏览器会阻塞(非常)长的选择器； Chrome 。

编辑:Example where Chrome does not apply CSS rule to some countries, e.g. the US, Turkey, Syria and the UK , 和 the CSS .有 7 个选择器，至少 #5 对于某些浏览器来说太长了。

Answer 1

ScottS concluded Chrome 处理 1366 个选择器。为什么是 1366？

1366 * 3 = 4098

为什么是 3？此选择器中有 3 个组件:.y1366 .c1 > * . 4098 是选择器部分 总数的限制。 Proof here (我只将 > * 添加到第一个选择器，它标记了 4095 个元素而不是 4096 个)。

我的测试

一组 4096 个选择器将完全忽略其余的选择器。示例:

.z .y1, .z .y2, .z .y3,..., .z .y3{background-color:red}

Live Example

在示例中，每个选择器都有 2 个组件:

.y1 > *
Component 1: .y1
Component 2: *

放置在第 2048 个之后的每个选择器都将被忽略。为什么是2048？因为每个选择器有 2 个组件，并且限制为 4096。不服气？

Next example

在上面的示例中，每个选择器都有一个组件:

.y1, .y2, .y3 ...

只有前 4096 个选择器在工作。 Chrome 没有限制，所以所有的选择器都应该有效。然而在某一点之后，剩余的选择器将被完全忽略。这个错误至少存在了 2 年。 IE9 及以下版本有 4095 个选择器的限制。

错误2

一大组选择器，其中一个有两个组件 .bdy .y1将 在 4096 个组合组件后生成类为 bdy 的元素受到影响。

例子

.bdy .y1, .y2, .y3, ... .y4097{background-color:red}

上面的 CSS 选择器组通过类名产生一个元素 bdy有 background-color:red应用。条件是在一个有两个组件的选择器之后有 4096 个选择器。

Live example

在上面的示例中，由于 4096 选择器(在一个以类名称为 bdy 的元素的子元素为目标的选择器之后，该元素的类名称为 y1 )，主体应用了红色。该错误将导致父级受到影响。

在.bdy .y1元素 .y1 (在父级 .bdy 下)是有针对性的，但元素 bdy也受到影响。如果将两个组件选择器向前移动 10 个位置，则可以再创建 10 个选择器，直到出现此错误为止。这意味着当组件选择器总数达到 4096 时就会出现错误。

解决方案

他们不会修复它。仅当所有选择器都在一行时才会发生此问题。所以就这样做:

.c1 .y1,
.c1 .y2,
.c1 .y3...

代替:

.c1 .y1, .c1 .y2, .c1 .y3...