css - 奇怪的CSS选择器组合

这是我的代码:
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 is here

因此，无论何时#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 {
    ...
}

为什么？

先感谢您!

ase濑

最佳答案

发生这种情况是因为选择器#cornerbox.show的specificity比#corner #cornerbox少，这意味着它无法覆盖它。

如果通过添加ID选择器来提高#cornerbox.show的特异性，或者通过删除ID选择器来降低#corner #cornerbox的特异性，则新的事务状态将覆盖第二个选择器。

关于css - 奇怪的CSS选择器组合，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14938649/