奇怪的css选择器组合

Question

这是我的代码:

HTML

<div id="corner">
    <div id="cornerbox"></div>
</div>

CSS

#corner {
    background-color: red;
    width: 200px; height: 200px;
}
#corner #cornerbox {
    background-color:black;
    width: 100px; height: 100px;
    opacity: 0.4;
}
#corner:hover  #cornerbox, #corner #cornerbox.show{
    opacity: 1;
}

JavaScript

$(document).keypress(function(e) {
        //console.log("keypress event from document: ",e.which);
        if (e.which == 63) {    // question mark (?) key
            $("#cornerbox").toggleClass("show");
        }
});

JSFiddle Code就在这里

因此,只要#corner:hover,CSS就会使"#cornerbox"改变不透明度,只要按下问号(？)键,JavaScript就会切换"#cornerbox"类的"show".

我注意到如果我改变上面的CSS看起来像这样:

#corner {
    ...
}
#corner #cornerbox {
    ...
}
#corner:hover #cornerbox, #cornerbox.show {
    ...
}

按(？)键时不改变不透明度,但"#cornerbox"接收类"show".

所有其他可能性都有效

这有效.

#corner {
    ...
}
#cornerbox {
    ...
}
#corner:hover #cornerbox, #corner #cornerbox.show {
    ...
}

这很有效.

#corner {
    ...
}
#cornerbox {
    ...
}
#corner:hover #cornerbox, #cornerbox.show {
    ...
}

为什么？

先感谢您!

TASE

Answer 1

这是因为选择#cornerbox.show具有较小的特异性比#corner #cornerbox,这意味着它是不能覆盖它的.

如果#cornerbox.show通过添加id选择器来增加特性,或者#corner #cornerbox通过删除id选择器来减少id特性选择器,则新状态允许第二个选择器覆盖.