关键词：
【中文标题】IE 的 CSS 选择器限制中如何计算媒体查询？【英文标题】：How are media queries counted in IE's CSS selectors limit? 【发布时间】：2014-09-23 00:38:39 【问题描述】：知道 IE 如何处理有关此 CSS 选择器限制的媒体查询吗？
它是将其视为单个 CSS 规则还是将其视为 1 条规则（@media 声明）+@media 规则中的规则数？
这是针对 IE9 的，据我所知，IE9 是唯一支持媒体查询的 IE，同时也存在 4095 选择器的问题。
我正在尝试编写一个工具来相应地拆分 CSS，但我不确定如何计算规则，因为 @media 规则将被计为 1 或将被计为 1 + nr 的规则?
【问题讨论】：
IE9 是唯一支持媒体查询的 IE，但早于 IE6 的早期版本都支持@media 规则，当时还没有引入媒体查询。
谢谢。很高兴知道。无论哪种方式，我都对如何计算此限制感兴趣。
您当然知道，出于这个确切原因，已经有工具可以拆分 CSS，它们（大概）知道如何计算规则。
是的，但对我来说这是一个边缘案例。我有一个 Java 应用程序，不依赖外部程序并使用 Process 调用它们我需要在我的应用程序中内置此功能。因此，如果对此没有 Java 解决方案（我还没有找到），我需要扮演自己的角色。
我也看过 BlessCSS，它似乎没有拆分 @media 查询。它将它们计为 1。因此，如果您有一个单一但巨大的媒体查询，则不会拆分您的 CSS 文件。我只是想知道这是正确的还是 BlessCSS 中的错误
【参考方案1】：
媒体查询似乎不包括在选择器限制中。不过，所有媒体查询中的所有规则都会被计算在内。
我编写了一个执行二进制搜索的测试，以找到忽略最后一个选择器的转折点。可通过https://robwu.nl/s/css-selector-limit-test.html 获取。二进制搜索在 0 - 4200 范围内运行，并报告输入选择器适合的频率，直到不再应用最后一个选择器。如果结果大于 4096，则测试用例报告“infinity”。
结果：
Turning point at 4095 for: #DUMMYcolor: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 规则”计数器脚本（例如 https://***.com/a/20496041 和 https://***.com/a/12313690），但不幸的是，它们都是错误的。媒体查询显示为 cssRules/rules 列表中的一个条目。计算样式表中选择器数量的正确方法是递归处理样式表以处理（嵌套）@mediaat-rules。
【讨论】：
干得好，谢谢。我相信您的回答不仅对我有帮助，而且对许多其他人都有帮助。【参考方案2】：我不确定它是否会被计为 1 或 1+nr，但我建议您不要在媒体查询之间拆分 CSS。
一个低效的黑客攻击
-
使用计数器并达到 4095。
回溯并尝试找到最近的@media 查询并从那里拆分 CSS。您可以在回溯时添加检查媒体查询是否直到 3000 才出现，然后不计算这种情况等。
【讨论】：
将媒体查询拆分为 2 或 3 有什么问题？ 如果第 4095 个选择器嵌套在 @media 查询中，则拆分将中断，如果您处理好它就可以了。 我可以在两个文件中重新创建 2 个媒体查询。所以第一个文件@media ... 4000 css rules; 和两个文件@media [same query] rest of css rules;
或者您可以制作一个单独的 CSS 文件，其中只包含媒体查询。
假设您永远找不到超过 4095 个 css 规则的媒体查询。正如我所说，我想制作一个工具来自动执行此操作，而用户如何拥有其 CSS 并不取决于我，我只想涵盖所有可能的情况。IE8：让“nth-child”选择器在媒体查询中工作？
】IE8：让“nth-child”选择器在媒体查询中工作？【英文标题】：IE8:makingthe`nth-child`selectorworkinsidemediaqueries?【发布时间】：2012-11-1507:02:18【问题描述】：在我的网站项目中，我使用媒体查询和nth-child选择器。IE8不支持开箱即用，... 查看详情
计算 IE 规则限制的 CSS 规则
...！【问题讨论】：这是每个CSS规则。但请注意，它适用于选择器，而不是规则 查看详情
CSS媒体查询和选择器[重复]
】CSS媒体查询和选择器[重复]【英文标题】：CSSMediaQueries&Selectors[duplicate]【发布时间】：2014-07-0507:45:11【问题描述】：如果我正确理解媒体查询，代码如下：@media(max-width:900px)...基于html标签+垂直滚动条（如果可见）运行。我... 查看详情
计算css文件中选择器的数量
】计算css文件中选择器的数量【英文标题】：Countnumberofselectorsinacssfile【发布时间】：2011-07-1020:25:49【问题描述】：是否有现有的插件/应用程序/程序/脚本/任何东西来分析和计算文件的css选择器？我想检查我的css文件在IE中不起... 查看详情
LESS：您可以将 CSS 选择器与媒体查询分组吗？
】LESS：您可以将CSS选择器与媒体查询分组吗？【英文标题】：LESS:CanyougroupaCSSselectorwithamediaquery?【发布时间】：2012-11-3009:34:44【问题描述】：我真的很高兴发现您可以创建一个可以轻松重用的媒体查询变量，并使您的代码更具可... 查看详情
CSS媒体查询更改html选择器中的字体大小不起作用
】CSS媒体查询更改html选择器中的字体大小不起作用【英文标题】：CSSmediaquerytochangefont-sizeinhtmlselectornotworking【发布时间】：2021-08-2109:09:18【问题描述】：我正在使用62.5%技巧在不同的屏幕尺寸上设置我的字体大小。这些字母在大... 查看详情
使用 Sass 从媒体查询中扩展选择器
】使用Sass从媒体查询中扩展选择器【英文标题】：ExtendingselectorsfromwithinmediaquerieswithSass【发布时间】：2013-01-2806:04:50【问题描述】：我有一个项目类和一个紧凑的“修饰符”类：.item....item.compact/*stylestomake.itemsmaller*/这很好。但... 查看详情
ie浏览器不兼容css媒体查询的解决办法
...率下，网站页面依然能显示一致，除了通过js来控制，css媒体查询更为方便，而痛点在于ie8不支持。我们可以通过respond.js库来解决，这个插件的原理很简单：将head中所有外部引入的css文件路径取出来存储在一个数组中，遍历数... 查看详情
在 IE 6,7 中使用“for”属性的标签的 CSS 选择器
】在IE6,7中使用“for”属性的标签的CSS选择器【英文标题】：CSSselectorforlabelusing"for"attributeinIE6,7【发布时间】：2011-05-0105:41:00【问题描述】：我的网页中有一个标签作为标签for="title"如何设置这个特定标签元素的样式？【... 查看详情
css中如何获取dom元素
参考技术A请参照css3伪类选择器；:first-child选择某个元素的第一个子元素（IE6不支持）:last-child选择某个元素的最后一个子元素:first-of-type[CSS3]选择一个上级元素下的第一个同类子元素:last-of-type[CSS3]选择一个上级元素的最后一个... 查看详情
css选择器的兼容性
...然存在，不太确定如何测试。IE6不支持.class1{}.class2{}双类选择器。IE8注意事项：E[attr]选择器在值为空的时候或者写错的时候，将不会生效；IE8支持CSS2.1的所有属性，支持伪类，但是 查看详情
如何计算与我的 CSS 选择器匹配的元素数量？
】如何计算与我的CSS选择器匹配的元素数量？【英文标题】：HowcanIcountthenumberofelementsthatmatchmyCSSselector?【发布时间】：2010-12-0702:06:15【问题描述】：我正在尝试使用SeleniumRC测试我的GWT应用程序并尝试使用CSS选择器匹配元素。我... 查看详情
针对不同媒体查询的不同 CSS 文件
...指示媒体类型，而不是扩展查询。我也不确定如何确保只选择一个，以及选择哪一个。基本上在我当前的CSS文件中，我有一个这样的媒体部分（简化仅供 查看详情
是否有文本节点的 CSS 选择器？
】是否有文本节点的CSS选择器？【英文标题】：IsthereaCSSselectorfortextnodes?【发布时间】：2022-01-0417:49:55【问题描述】：我想做的（显然不是在IE中）是：p:not(.list):last-child+:textmargin-bottom:10px;这会给文本节点一个边距。（这甚至可... 查看详情
是否有针对 IE10 的特定 CSS 选择器？
】是否有针对IE10的特定CSS选择器？【英文标题】：AreThereSpecificCSSSelectorsTargetingIE10?【发布时间】：2011-11-1108:59:42【问题描述】：由于IE在版本10中摆脱了条件cmets，我迫切需要找到专门针对IE10的“CSShack”。请注意，被“黑”的必... 查看详情
在 IE 8 和 7 中使用较新的 CSS3 选择器的首选方法是啥？
】在IE8和7中使用较新的CSS3选择器的首选方法是啥？【英文标题】：WhatispreferredmethodtousenewerCSS3selectorsinIE8and7?在IE8和7中使用较新的CSS3选择器的首选方法是什么？【发布时间】：2012-01-3117:08:31【问题描述】：在IE8和7中使用较新的C... 查看详情
针对 IE 4096 选择器/样式表限制的 Rails 资产管道解决方案
】针对IE4096选择器/样式表限制的Rails资产管道解决方案【英文标题】：RailsassetpipelinesolutionforIE4096selector/stylesheetlimit【发布时间】：2012-08-2100:06:50【问题描述】：问题Microsoft\'sIEsupportdocumentation解释说在InternetExplorer6-9中：前31个样... 查看详情
ie8实现媒体查询
IE8实现媒体查询IE8下想实现不同分辨率样式的兼容，需要用Css3中的media,可是IE8不支持@media啊翻不出去，那找度娘果然找到了一个Demo测试一下，IE8媒体查询也不是多难1、下载Respond2、找到Respond文件中的respond.src.js3、已测试Demo为... 查看详情