Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
812 views
in Technique[技术] by (71.8m points)

css - #id#id : Repeated occurrences of the same simple selector should increase specificity but don't for IDs in IE9

For some time now I'm using a little trick that I thought was smart.

That is combining the same css selector to add specificity to the rule's selector.

CSS Specs do mention :

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

http://www.w3.org/TR/css3-selectors/#specificity

For example if HTML is

<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>

And CSS

#main .titles h2{
    color: red;
}
#main .blue.blue{
    color: blue;
}

This way I can use the class .blue to override styles, event in the header...

(I'm doing this because I hate using !important. To me it should be avoided at all costs.)

First selector weighs 0111 (1 id, 1 class, 1 element) Second selector weighs 0120 (1 id, 2 classes)

Sometimes I do it with IDs. And it works... in real browsers... This selector :

#main#main .blue{}

should weigh 0200, as it's got 2 IDs right?

Well IE9 (didn't try others) does not interpret multiple identical IDs in selectors. This selector won't override #main .titles h2{} in IE9...

IE's css console shows a computed selector equal to #main .blue and removes the second occurence...

Why is that?

To me this is just another IE implementation "bug".

As @BoltClock suggested, I filed a report here :

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Yes, judging by the behavior shown in F12, this is definitely a bug. It's also a violation of the spec, if you interpret "do increase specificity" as "must increase specificity". This issue seems to only affect ID selectors. Class selectors, attribute selectors and pseudo-classes are OK.

This appears to have been reported before as when I search Microsoft Connect, it turns up an existing report, but I can't view it for some reason. The issue is still present in IE11; if you can't view the report either, feel free to file another one.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...