如何设置：在按钮上对焦背景颜色

Question

我的问题很少，但我非常困惑，哪里出问题了。我不能在我的按钮上设置背景颜色:focus。

我的CSS

span {background: #000; display:inline-block; padding: 13px 1% 7px; text-align: center; width: 50px; cursor:pointer} 
label {background: #fff; display: inline-block; height: 3px; margin: 0 0 5px; vertical-align: middle; width: 100%; cursor:pointer} 
span:hover label{background:red;} 
span:active label{background:green;} 
span:focus label{background:#0ff;} 

和我的HTML

<span id="open"> 
<label></label> 
<label></label> 
<label></label> 
</span> 

请告诉我在哪里去错了。

Answer 1

将一个tabindex属性添加到您的范围。

<span id="open" tabindex="0"> 

这将允许它是可以聚焦的。然后，您可以通过单击或切换来设置焦点。你的CSS没有问题 - 它的工作原理是这样。见http://jsfiddle.net/rxb9ubxr/1/。

因为您最后指定了focus规则，所以一旦元素获得焦点，将永远不会应用active规则。即使元素具有焦点（换句话说，要在点击过程中更改颜色），也允许应用active规则，但要颠倒active和focus规则的顺序。

span:hover label {background: red;} 
span:focus label {background: #0ff;} 
span:active label {background: green;}