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

Question

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

我的HTML如下所示：

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

My（sass-compiled）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行拆分为两个约40k字符的部分并使用相同的display: block指令来获取Chrome中的正确行为。一个假设是Chrome CSS解析器按如下方式截断长行：

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

因此，#mysection元素会影响display: block指令。

我有意义吗？我觉得我在这里失去了理智。

Answer 1

如果单个css规则包含超过4096个选择器，则会在选择器特异性上创建溢出。 This is a known bug，根据主题，没有任何计划来解决它

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

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

虽然它可能对您的具体情况没有帮助，但将选择器移动到他们自己的行显示为resolves the issue。