奇怪的 css 选择器组合答案

【问题标题】：Bizarre css selector combination奇怪的 css 选择器组合
【发布时间】：2013-02-03 00:31:58
【问题描述】：

这是我的代码：

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”的“显示”类。

我注意到如果我将上面的 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 {
    ...
}

为什么？

提前谢谢你！

时间

【问题讨论】：

标签： css css-selectors css-specificity

【解决方案1】：

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

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

【讨论】：