媒体查询如何计入IE'；什么是CSS选择器限制？

你知道IE如何处理关于CSS选择器限制的媒体查询吗

它是将其视为单个CSS规则还是将其视为1个规则（@media声明）+@media规则内的规则数

---

据我所知，IE9是唯一一款支持媒体查询的IE，同时也存在4095选择器的问题

---

我正在尝试编写一个工具来相应地拆分CSS，但我不确定如何计算规则，因为在@media中，规则将被计算为1或将被计算为1+nr的内部规则？

我不确定它是否会被计算为1或1+nr，但我建议您不要在媒体查询之间拆分CSS

没有效率的黑客

使用计数器，直到4095

回溯并尝试查找最新的@media查询，并从中拆分CSS。您可以添加一个检查，如果媒体查询在回溯时直到3000才出现，则不计算该情况等

---

介质查询似乎不包括在选择器限制中。不过，所有媒体查询中的所有规则都会被计算在内

我编写了一个测试，执行二进制搜索，以找到忽略最后一个选择器的转折点。可在以下网址下载：。二进制搜索在0-4200范围内运行，并报告在不再应用最后一个选择器之前输入选择器的匹配频率。如果结果大于4096，测试用例报告“无限”

结果:

Turning point at 4095 for: #DUMMY{color:red;}
Turning point at 4095 for: @media screen(min-width:9px) { #DUMMY {color:red;} }
Turning point at 2047 for: @media screen(min-width:9px) { #DUMMY, #DUMMY {color:red;} }
Turning point at 1023 for: @media screen(min-width:9px) { #DUMMY {color:red;} #DUMMY, #DUMMY, #DUMMY {color:red;} }
Turning point at 1364 for: @media screen(min-width:9px) { #DUMMY {color:red;} } @media screen(max-width:9px) {#DUMMY, #DUMMY {color:red}}
Turning point at 1364 for: @media screen(min-width:9px) { #DUMMY {color:red;} } @media screen(max-width:9px) {#DUMMY {color:red;}} @media screen(max-width:9px){ #DUMMY {color:red;}}
Turning point at infinity for: @media screen (min-width:9px) { }
Turning point at infinity for: @media screen (min-width:9px) { } @media screen (min-width:9px) { } @media screen (min-width:9px) { }
Turning point at infinity for: @font-face { font-family: "blablablablabla"; } 

最后三个测试表明，媒体查询（以及其他at规则，如

@font-face

）不计入选择器限制

---

我在Stack Oveflow上看到了许多“css规则”计数器脚本（例如和），但不幸的是，它们都是错误的。媒体查询在cssRules/rules列表中显示为一个条目。计算样式表中选择器数量的正确方法是递归处理样式表以处理（嵌套的）

@media

at规则。

IE9是唯一支持媒体查询的IE，但早在媒体查询尚未引入时，IE6的早期版本都支持

@media

规则。谢谢。很高兴知道。不管怎样，我都对如何计算这个限制感兴趣。你当然知道，已经有一些工具出于这个确切的原因来拆分CSS，它们（大概）知道如何计算规则。是的，但对我来说这是一个边缘案例。我有一个Java应用程序，不需要依赖外部程序，也不需要通过进程调用它们。我需要在我的应用程序中内置此功能。因此，如果没有Java解决方案（我还没有找到），我需要扮演自己的角色。它将它们计算为1。因此，如果您有一个单一但巨大的媒体查询，ti将不会分割您的CSS文件。我只是想知道这是否正确，或者这是BLESCSSS中的一个错误。将媒体查询拆分为2或3有什么问题？如果第4095个选择器嵌套在@media query中，拆分将中断，如果您处理好了，那么就可以了。我可以在两个文件中重新创建2个媒体查询。所以第一个文件

@media。。。{4000 css规则；}

和两个文件

@media[同一查询]{css规则的其余部分；}

或者您可以创建一个单独的css文件，其中只包含媒体查询。假设您永远找不到包含超过4095个css规则的媒体查询。正如我所说的，我想制作一个自动化的工具，而用户如何使用CSS并不取决于我，我只想涵盖所有可能的情况。干得好，谢谢。我相信你的回答不仅对我有帮助，而且对其他许多人也有帮助。