奇怪的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的特殊性，新的事務狀態允許第二個選擇器覆蓋。