leo*_*leo 9 css cross-browser css-selectors
CSS选择器可以使用多长时间？
我对"规范"所说的内容并不太感兴趣,而是对哪些浏览器实际可以处理.到目前为止,我只知道一个浏览器会阻塞(非常)长的选择器; 铬.
编辑:Chrome不会将CSS规则应用于某些国家 /地区的示例,例如美国,土耳其,叙利亚和英国以及CSS.有7个选择器,至少#5对于某些浏览器来说太长了.
如果我通过.y2010 .au > *(前97)删除所有选择器组,则.y1990 .us > *首先显示该组.这似乎意味着限制是问题.如果我正确计算出来,那么Chrome代码的限制似乎是1366(这些数字来自将其导入带有逗号分隔的excel电子表格,然后对单元格进行计数).因此将其拆分为2或3个较小的组可以解决该问题.
我无法解释的一件事是在Chrome开发者工具中,如果我隐藏了.land { fill: lightgray}正确的颜色.us和其他显示的颜色,这几乎似乎表明它以某种方式"隐藏"或"覆盖"颜色,这不是非常有意义.我无法弄清楚.land隐藏时从哪里获得正确的颜色.
第一轮 - 不仅仅是一组选择器
然而,它似乎可能是更多的总字符而不是选择器的总数,因为Chrome处理这些1366选择器很好(感谢onetrickpony的初始小提琴,帮助我提出这个测试示例),甚至还有一个到1367是没关系.
但是将html和css设置为与真实用例更接近,它可以在1366个项目中运行,但body如果它是1367项,我会在Chrome 中将红色奇怪地泄漏到自身.(也许这与我在.land上面提到的真实用例的颜色奇怪之处有关.)
如果我删除了> *css 的一部分,那么1367项再次起作用,因此*选择器本身不是问题,因为如果将其更改为div 它再次失败.然而,*选择器可能会导致奇怪的颜色泄漏,因为在这个示例中,> *我的Chrome上已删除,它开始失败,2049因为我预计它会失败(即在div中失去颜色,而不是像以前那样颜色泄漏故障).请注意,此示例包含50,000个元素(警告:如果您加载它,可能会收到"停止脚本"警告,只需绕过一两次它应该完成加载)仍然适用于Firefox和IE10.即使我> *在两个浏览器中添加回来都是如此,而在Chrome中它又恢复为再次进行背景泄漏(这进一步证实了*选择器可能与奇怪的颜色行为有关).
第二轮 - 选择器数和字符数的某种组合
从上面的一个失败例子中,我计算出失败的字符总数大约是 20500.然而,我可以在这里没有问题地获得50002个字符,并且100002在这里 - 所以它必须是X个选择器的总和Y个字符的一些组合产生限制.在这个例子中,我可以red在4097元素失败之前通过4096元素获得背景,因为我减少了单个选择器的大小.减少量必须与字符串中的选择器数量成比例,因为只有两个选择器仍然允许其中一个中的500,006个字符仍然适用于两者.在4096号的可能是真正的"最大"限制选择器的数目,因为当我减少选择到每个只有两个字符(加上.,,和空格),我还是在4096获得成功,但在4097失败.
我觉得有趣的是,最后一次测试集失败发生在Internet Explorer提供的4095数字附近,因为可以通过该IHTMLStyleSheet::addRule方法完成的最大选择器数量.这显然只是该方法的一个限制,因为IE10在4097上面测试中的数字标记或者Chrome失败的任何测试(没有一个使用该方法生成选择器)时工作正常.为什么这个数字接近于IE浏览器给Chrome的失败我不知道,但它很有趣.
没有确切的幻数,但鉴于上述实验,似乎根据Chrome的选择器大小的选择器数量而不是Firefox或IE10,存在一些较小的字符限制.它显然不是实际的选择器数量,也不是实际的总字符数,而是两者之间的某种组合,其中最多只显示4096限制,但如果选择器字符串较长则可能更少(作为失败的初始示例)之后1366.
ScottS得出结论, Chrome处理了1366个选择器.为什么1366？
1366*3 = 4098
为什么3？此选择器中有3个组件:.y1366 .c1 > *.
4098是选择器部件总数的限制.证明在这里(我只添加> *到第一个选择器,它标记4095个元素而不是4096).
一组4096个选择器将完全忽略其余的选择器.例:
.z .y1, .z .y2, .z .y3,..., .z .y3{background-color:red}
在示例中,每个选择器都有2个组件:
.y1 > *
Component 1: .y1
Component 2: *
放置在2048th之后的每个选择器都将被忽略.为什么2048？因为每个选择器有2个组件,限制是4096.不相信？
在上面的示例中,每个选择器都有一个组件:
.y1, .y2, .y3 ...
只有前4096个选择器正在工作.Chrome没有限制,因此所有选择器都可以使用.然而在某一点之后,剩下的选择者被完全忽略了.此错误至少存在2年.IE9及以下版本的限制为4095个选择器.
在 4096个组合组件之后,一大组选择器(其中一个具有两个组件).bdy .y1将导致具有类的元素受到影响.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...