html - HTML 禁用按钮获取：active CSS 伪类

Question

CSS：

button:active {
/* active css */
}

button:disabled {
  opacity: 0.5;
}

HTML：

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

当我单击按钮时，浏览器会添加按钮：活动状态，使其看起来像是被单击（即使它被禁用）。我发誓我认为 :active 仅在启用按钮时才添加。我错过了什么？

Answer 1

From what I can tell, :active doesn't exclude :disabled elements. You can read the spec if you'd like.

To solve your problem, you could exclude :disabled elements by targeting only :enabled elements with your :active selector:

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

button:disabled {
  opacity: 0.5;
}

Demo: http://jsfiddle.net/Blender/LRvra/1/

Answer 2

According to the CSS3 specification (:disabled is not in CSS2.1) there is no mention that :active and :disabled are mutually exclusive. It's possible that this part of the specification needs clarification so UAs are free to apply the pseudo-classes in combination.

I suggest you modify your selectors to be more explicit:

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

Answer 3

您还可以使用 css 的 :not()-descriptor：

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

button:disabled {
  opacity: 0.5;
}

祝你一切顺利，帕特里克