微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

CSS选择器可以使用多长时间?

CSS选择器可以使用多长时间?

我对“规范”所说的内容并不太感兴趣,而是对哪些浏览器实际可以处理.到目前为止,我只知道一个浏览器会阻塞(非常)长选择器;铬.

编辑:Example where Chrome does not apply CSS rule to some countries,e.g. the US,Turkey,Syria and the UKthe CSS.有7个选择器,对于某些浏览器,至少#5太长.

解决方法

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}

Live Example

在示例中,每个选择器都有2个组件:

.y1 > *
Component 1: .y1
Component 2: *

放置在2048th之后的每个选择器都将被忽略.为什么2048?因为每个选择器有2个组件,限制是4096.不相信?

Next example

在上面的示例中,每个选择器都有一个组件:

.y1,.y2,.y3 ...

只有前4096个选择器正在工作. Chrome没有限制,因此所有选择器都可以使用.然而在某一点之后,剩下的选择者完全被忽略了.此错误至少存在2年. IE9及以下版本的限制为4095个选择器.

错误2

一大组选择器,其中一个具有两个组件.bdy .y1将在4096个组合组件之后导致具有类bdy的元素受到影响.

.bdy .y1,.y3,... .y4097{background-color:red}

上面的CSS选择器组导致按类名bdy的元素具有背景颜色:应用了红色.条件是在具有两个组件的一个选择器之后具有4096个选择器.

Live example

在上面的示例中,由于4096选择器(在具有类名称bdy且具有类名y1的元素的子元素之后),使用红色来应用正文.该错误将导致父母受到影响.

在.bdy .y1中,元素.y1(在父.bdy下)是目标,但元素bdy也会受到影响.如果将两个组件选择器向前移动10个位置,则可以创建10个以上的选择器,直到出现此错误.这意味着当组件选择器的总数达​​到4096时会发生错误.

他们不打算解决它.仅当所有选择器都在一行上时才会出现此问题.所以这样做:

.c1 .y1,.c1 .y2,.c1 .y3...

代替:

.c1 .y1,.c1 .y3...

原文地址:https://www.jb51.cc/css/215306.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。