我对“规范”所说的内容并不太感兴趣,而是对哪些浏览器实际可以处理.到目前为止,我只知道一个浏览器会阻塞(非常)长选择器;铬.
编辑:Example where Chrome does not apply CSS rule to some countries,e.g. the US,Turkey,Syria and the UK和the CSS.有7个选择器,对于某些浏览器,至少#5太长.
解决方法
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: *
放置在2048th之后的每个选择器都将被忽略.为什么2048?因为每个选择器有2个组件,限制是4096.不相信?
在上面的示例中,每个选择器都有一个组件:
.y1,.y2,.y3 ...
只有前4096个选择器正在工作. Chrome没有限制,因此所有选择器都可以使用.然而在某一点之后,剩下的选择者完全被忽略了.此错误至少存在2年. IE9及以下版本的限制为4095个选择器.
错误2
一大组选择器,其中一个具有两个组件.bdy .y1将在4096个组合组件之后导致具有类bdy的元素受到影响.
例
.bdy .y1,.y3,... .y4097{background-color:red}
上面的CSS选择器组导致按类名bdy的元素具有背景颜色:应用了红色.条件是在具有两个组件的一个选择器之后具有4096个选择器.
在上面的示例中,由于4096选择器(在具有类名称bdy且具有类名y1的元素的子元素之后),使用红色来应用正文.该错误将导致父母受到影响.
在.bdy .y1中,元素.y1(在父.bdy下)是目标,但元素bdy也会受到影响.如果将两个组件选择器向前移动10个位置,则可以创建10个以上的选择器,直到出现此错误.这意味着当组件选择器的总数达到4096时会发生错误.
解
他们不打算解决它.仅当所有选择器都在一行上时才会出现此问题.所以这样做:
.c1 .y1,.c1 .y2,.c1 .y3...
代替:
.c1 .y1,.c1 .y3...