css – #idate id:同一个简单选择器的重复出现应该增加特异性,但不能用于IE9中的ID

一段时间以来,我正在使用一种我认为很聪明的小技巧.

那就是组合相同的css选择器来增加规则选择器的特异性.

CSS Specs确实提到:

Note: Repeated occurrances of the same simple selector are allowed and
do increase specificity.

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覆盖样式,标题中的事件……

(我这样做是因为我讨厌使用!重要.对我来说,应该不惜一切代价避免.)

一个选择器重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实现“bug”.

正如@BoltClock建议的那样,我在这里提交了一份报告:

https://connect.microsoft.com/IE/feedbackdetail/view/958790/repeated-occurrences-of-the-same-simple-selector-should-increase-specificity-even-with-ids

解决方法

是的,根据F12中显示的行为判断,这绝对是一个错误.如果你将“增加特异性”解释为“必须增加特异性”,这也违反了规范.此问题似乎只影响ID选择器.类选择器,属性选择器和伪类都可以.

这似乎是在我搜索Microsoft Connect之前已经报告的,它发现了现有的报告,但由于某种原因我无法查看它.这个问题仍然存在于IE11中;如果您无法查看报告,请随意提交另一份报告.

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效