奇怪的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 is here

因此，只要按下问号（？）键，每当#corner：悬停时，JavaScript都会使“#cornerbox”更改不透明度，并且JavaScript会切换类“showcornerbox”的“#cornerbox”。

我注意到，如果我改变上述CSS看起来像这样：

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

透明度不改变，当按键被按下，但“#cornerbox”接收级“秀”（？） 。

所有其他的可能性工作。

This Works。

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

这个工程。

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

为什么？

预先感谢您！

田濑

Answer 1

这是因为选择器#cornerbox.show具有较小specificity比#corner #cornerbox，这意味着其不能覆盖它的。

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