HTML禁用按钮获取：活动CSS伪类

Question

CSS：

button:active {
/* active css */
}

button:disabled {
  opacity: 0.5;
}

HTML：

<button disabled="disabled">Ok</button>

当我点击按钮时，浏览器会添加按钮：活动状态使其看起来像被点击（即使它被禁用）。我发誓，我想：只有在按钮启用时才会添加活动状态。我错过了什么？

Answer 1

据我所知，:active不排除:disabled元素。如果您愿意，可以阅读spec。

要解决您的问题，您可以通过仅使用:disabled选择器定位:enabled元素来排除:active元素：

button:enabled:active {
/* active css */
}

button:disabled {
  opacity: 0.5;
}

演示：http://jsfiddle.net/Blender/LRvra/1/

Answer 2

According to the CSS3 specification（:disabled不在CSS2.1中）没有提到:active和:disabled是互斥的。规范的这一部分可能需要澄清，因此UA可以自由地组合使用伪类。

我建议你修改你的选择器更明确：

button:enabled:active {
    /* active css */
}
button:disabled {
    opacity: 0.5;
}

Answer 3

你也可以使用：not（） - css的描述符：

button:active:not(:disabled) {
/* active css */
}

button:disabled {
  opacity: 0.5;
}

希望你们都是最好的，Patric