Chrome 的 CSS 解析器是否有最大行长？

Question

我观察到一些与长 CSS 规则相关的非常奇怪的行为。

我的 HTML 如下所示：

<section id="mysection" class="modal">...</section>

我的（sass 编译的）CSS 包含以下规则：

.modal {
    display: none;
}

somelement, someotherelement, ... #mysection subelement,... #mysection someothersubelement, ... {
    display: block;
}

第二个 CSS 规则是 84000+ 个字符长。请注意，它不应影响#mysection元素，而只影响其子元素。

想要的结果是隐藏#mysection元素。这在 Firefox 37.0.2 中正确实现。在 Chrome 42.0.2311.135 中，元素是可见的——这是不正确的。开发人员工具表明该#mysection元素受这两个规则的影响，但第二个规则优先。但是，我似乎无法找到影响部分显示属性的 CSS 行的特定部分。

每当我更改其 ID 时，该部分就会隐藏在 Chrome 中。

我还可以通过将 CSS 行手动拆分为具有相同display: block指令的约 40k 个字符的两个部分，从而在 Chrome 中获得正确的行为。一个假设是 Chrome CSS 解析器会按如下方式截断长行：

... #mysection subelement, ...
              ^
              |
          truncate here

因此，该#mysection元素将受到display: block指令的影响。

我说的有道理吗？我觉得我在这里失去了理智。

Answer 1

如果单个 css 规则包含超过 4096 个选择器，则会导致选择器特异性溢出。这是一个已知的错误，并且根据线程，实际上没有任何计划来修复它

“......因为在一个节点上具有如此高的特异性是一种非常极端的情况。”

这是猜测，但我假设问题的根本原因与 css 解析器中某个 32 位整数的限制有关，因为 4096 数字与 IE6-9 中的样式表限制非常相似。此处解释了该问题背后的数学原理。

虽然它可能对您的特定情况没有帮助，但将选择器移动到它们自己的行似乎可以解决问题。