#id#id ：重复出现相同的简单选择器应该会增加特异性，但对于 IE9 中的 ID 不会
Posted
技术标签:
【中文标题】#id#id ：重复出现相同的简单选择器应该会增加特异性，但对于 IE9 中的 ID 不会【英文标题】：#id#id : Repeated occurrences of the same simple selector should increase specificity but don't for IDs in IE9 【发布时间】：2014-10-23 07:50:41 【问题描述】：一段时间以来，我一直在使用一个我认为很聪明的小技巧。
这是组合相同的 css 选择器来为规则的选择器添加特异性。
CSS 规范确实提到了：
注意：允许重复出现相同的简单选择器，并且 确实增加特异性。
http://www.w3.org/TR/css3-selectors/#specificity
例如，如果 html 是
<body>
<section id="main">
<header class="titles">
<h2>Title red</h2>
<h2 class="blue">Title blue</h2>
</header>
<h2 class="blue">Title blue</h2>
</section>
</body>
和 CSS
#main .titles h2
color: red;
#main .blue.blue
color: blue;
这样我就可以使用.blue 类来覆盖样式、标题中的事件...
（我这样做是因为我讨厌使用!important。对我来说应该不惜一切代价避免它。）
第一个选择器的权重为 0111（1 个 id，1 个类，1 个元素） 第二个选择器的权重为 0120（1 个 id，2 个类）
有时我会使用 ID。它可以工作......在真实的浏览器中...... 这个选择器：
#main#main .blue
应该重 0200，因为它有 2 个 ID 对吗？
IE9（没有尝试过其他的）不会解释选择器中的多个相同 ID。
此选择器不会覆盖 IE9 中的 #main .titles h2...
IE 的 css 控制台显示了一个等于 #main .blue 的计算选择器，并删除了第二次出现...
这是为什么呢？
对我来说，这只是另一个 IE 实现“错误”。
正如@BoltClock 建议的那样，我在这里提交了一份报告：
https://connect.microsoft.com/IE/feedbackdetail/view/958790/repeated-occurrences-of-the-same-simple-selector-should-increase-specificity-even-with-ids
【问题讨论】：
我可以确认，这是奇怪的 CSS：#body#body .blue 你的意思是#body #body .blue 吗？ 我不认为这是预期的行为，所以虽然它现在可以工作，但将来可能会改变，所以你的网页会突然看起来不同。如果您想覆盖样式，只需使用 !important。 @MichaëlvandeWeerd 查看规范：w3.org/TR/css3-selectors/#specificity 它提到“允许重复出现相同的简单选择器并增加特异性。” @ArmelLarcier 我的立场是正确的。 【参考方案1】：是的，从 F12 中显示的行为来看，这绝对是一个错误。如果您将“确实增加特异性”解释为“必须增加特异性”，这也违反了规范。这个问题似乎只影响 ID 选择器。类选择器、属性选择器和伪类都可以。
这似乎已经报告过，因为当我搜索 Microsoft Connect 时，它会出现一个现有的报告，但由于某种原因我无法查看它。该问题在 IE11 中仍然存在；如果您也无法查看报告，请随时提交另一份报告。
【讨论】：
谢谢！我暗暗希望你能回答这个问题 ;-) 提交报告...connect.microsoft.com/IE/feedbackdetail/view/958790/… @Armel Larcier：哈哈，这是我的荣幸；）以上是关于#id#id ：重复出现相同的简单选择器应该会增加特异性，但对于 IE9 中的 ID 不会的主要内容，如果未能解决你的问题，请参考以下文章