html - HTML無効ボタン取得：アクティブCSS疑似クラス

Question

CSS：

button:active {
/* active css */
}

button:disabled {
  opacity: 0.5;
}

HTML：

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

ボタンをクリックすると、ブラウザはbutton：active状態を追加して、クリックされたように見せます（無効になっている場合でも）。ボタンが有効になっている場合にのみ：activeが追加されたと思いました。私は何を逃しましたか？

score 38 · Accepted Answer

私が言えることから、要素:activeを除外していません。必要に応じて仕様:disabledを読むことができます。

問題を解決するために、セレクターで要素:disabledのみをターゲットにすることで要素を除外できます。:enabled:active

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

button:disabled {
  opacity: 0.5;
}

score 4 · Accepted Answer

CSS3仕様（:disabledCSS2.1にはありません）によると、それについての言及はなく、:active相互:disabledに排他的です。仕様のこの部分を明確にする必要がある可能性があるため、UAは疑似クラスを自由に組み合わせて適用できます。

より明確になるようにセレクターを変更することをお勧めします。

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

score 0 · Accepted Answer

cssの：not（）-記述子を使用することもできます。

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

button:disabled {
  opacity: 0.5;
}

よろしくお願いします、パトリック

3 に答える 3