CSS选择器可以使用多长时间？
我对“规范”所说的内容并不太感兴趣，而是对哪些浏览器实际可以处理。到目前为止，我只知道一个浏览器会阻塞（非常）长的选择器;铬。
修改：Example where Chrome does not apply CSS rule to some countries, e.g. the US, Turkey, Syria and the UK和the CSS。有7个选择器，对于某些浏览器，至少＃5太长了。
答案 0 :(得分：8)
如果我通过.y2010 .au > *（前97位）删除所有选择器设置，则首先显示.y1990 .us > *设置。这似乎意味着限制是问题。如果我正确计算出来，那么Chrome代码的限制似乎是1366（这些数字来自将其导入带有逗号分隔的excel电子表格，然后对单元格进行计数）。因此将其拆分为2或3个较小的组可以解决该问题。
我无法解释的一件事是在Chrome开发者工具中，如果我隐藏.land { fill: lightgray}，那么.us和其他人的正确颜色会显示出来，这似乎表明它是“隐藏“或”以某种方式覆盖“颜色，这没有多大意义。我无法弄清楚隐藏.land时从哪里获得正确的颜色。
第一轮 - 不仅仅是一组选择器
但是，它似乎可能是更多的总字符而不是选择器的总数，因为Chrome处理these 1366 selectors fine（感谢onetrickpony的最初小提琴帮助我提出了这个测试示例），并且{{ 3}}。
但是将html和css设置为将 更接近与您的真实用例和even one more to 1367 is okay匹配，但是我得到了一个奇怪的泄漏如果是it works at 1366 items，则Chrome中的body本身会显示红色。 （也许这与我在上面提到的.land颜色奇怪性所遇到的真实用例有关。）
如果我移除了> *部分的1367 items，那么*选择器本身就不是问题，因为如果将其更改为div } 1367 items again works。但是，*选择器可能会导致奇怪的颜色泄漏，因为在此示例中我的Chrome it fails again上删除了> *，因为我预计它会失败（即丢失颜色） div，而不是像以前的失败那样有颜色泄漏）。请注意，此示例包含50,000个元素（警告：如果您加载它，可能会收到“停止脚本”警告，只需绕过一两次，它应该完成加载）{{3} }。即使我在it begins to fail at 2049中添加了> *，也是如此，而在Chrome中，它又会再次进行背景泄漏（这进一步证实*选择器可能有事情要做奇怪的颜色行为）。
第二轮 - 选择者数和字符数的某种组合
从上面的一个失败示例中，我计算出失败时字符总数大致 20500。然而，我可以获得still works in Firefox and IE10 for me和both browsers - 所以它必须是X个选择器的总和Y个字符的组合，这是产生限制。在50002 characters without an issue here中，在4097元素失败之前，我可以通过red背景获得4096个元素，因为我减少了单个选择器的大小。减少量必须与字符串中的选择器数量成比例，因为只有两个选择器仍然允许100002 here。 4096的数量可能是选择器数量的真正“最大”限制，因为当我将选择器减少到每个只有两个字符（加上.，,和空格）时，我仍然是this example，但500,006 characters in one of them to still work for both。
我觉得有趣的是，最后一次测试集失败发生在4095 succeed at 4096附近。这显然只是该方法的一个限制，因为IE10在上面的测试中使用4097数字标记，或者Chrome失败的任何测试（没有一个使用该方法生成选择器）工作正常。为什么这个数字接近IE浏览器给Chrome的失败我不知道，但它很有趣。
没有确切的幻数，但鉴于上述实验，似乎根据Chrome的选择器大小的选择器数量而不是Firefox或IE10，存在一些较小的字符限制。它显然不是实际的选择器数量，也不是实际的总字符数，而是两者之间的某种组合，其中最多看起来4096是限制，但如果选择器字符串更长（如1366之后失败的初始示例。
答案 1 :(得分：7)
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}
在示例中，每个选择器都有2个组件：
.y1 > *
Component 1: .y1
Component 2: *
忽略2048之后的每个选择器。为什么2048？因为每个选择器有2个组件，限制为4096.不相信？
在上面的示例中，每个选择器都有一个组件：
.y1, .y2, .y3 ...
只有前4096个选择器正常工作。 Chrome没有限制，因此所有选择器都可以使用。然而在某一点之后，剩下的选择者被完全忽略了。此错误至少存在2年。 IE9及以下版本有4095个选择器限制。
一大组选择器，其中一个包含两个组件.bdy .y1，在 4096组合组件之后会导致具有类bdy的元素受到影响。
.bdy .y1, .y2, .y3, ... .y4097{background-color:red}
上面的CSS选择器组导致按类名bdy的元素应用background-color:red。条件是在一个带有两个组件的选择器之后有4096个选择器。
在上面的示例中，由于4096选择器（在具有类名bdy且具有类名y1的元素的子元素之后的目标）之后，正在应用红色。该错误将导致父母受到影响。
在.bdy .y1中，元素.y1（在父.bdy下）已定位，但元素bdy也会受到影响。如果将两个组件选择器向前移动10个位置，则可以再创建10个选择器，直到出现此错误。这意味着当组件选择器的总数达到4096时会发生错误。
他们不打算解决它。仅当所有选择器都在一行上时才会出现此问题。所以就这样做：
.c1 .y1,
.c1 .y2,
.c1 .y3...
而不是：
.c1 .y1, .c1 .y2, .c1 .y3...
答案 2 :(得分：1)
CSS选择器没有最大长度。您可以根据需要定义。但是，应该考虑的重要事项是file size。
IE将读取的最大kb size为288kb，该标记后的任何样式都无法读取.- Internet Explorer CSS File Size Limi
此外，每个样式表的最大选择器仅限于4095 css规则，31样式表可以链接到文件中 - IHTMLStyleSheet::addRule method
最后一个大问题是带宽。似乎css文件通常很轻。但是，如果有31个css规则具有很长的名称，则可能会降低性能。