css 非 disabled 的元素添加 :active 样式

选择非禁用的元素并为其添加 :active 样式
更新于: 2023-09-06 10:54:04 
<style>
/* 选择非禁用的元素并为其添加 :active 样式 */
:not([disabled]):active {
  /* 在这里添加 :active 样式 */
  background-color: #ff0000; /* 举例：设置背景颜色为红色 */
  color: #ffffff; /* 举例：设置文本颜色为白色 */
  /* 添加其他 :active 样式属性 */
}

/* 另一个更加推荐的写法 */
button:enabled:active {
/* active css */
}
</style>


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Btn:enable</title>
    <style>
      button:enabled:active {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <button>Checked Hover</button>
    <button disabled>Checked Hover(disabled)</button>
  </body>
</html>