CSS :active详解

发布时间：2023-05-16

一、什么是CSS :active伪类？

CSS :active是一个伪类，用于向正在被用户激活的元素添加样式。它仅在用户点击激活元素时处于活动状态，并在该元素保持按下状态时保持活动状态。该伪类适用于所有HTML元素。 :active伪类最常用于为链接和按钮添加交互式效果，例如在用户点击链接或按下它们时改变它们的背景颜色或文本颜色。

a:active {
  background-color: red;
  color: white;
}

二、:active伪类示例

下面是一个简单的HTML页面，其中包含一个链接和两个按钮，每个元素都使用了:active伪类：

<a href="#">链接</a>
<button>按钮1</button>
<button>按钮2</button>
<style>
  a:active {
    background-color: red;
    color: white;
  }
  button:active {
    background-color: green;
    color: white;
  }
</style>

三、:active伪类与其他伪类之间的区别

:active伪类只在用户激活元素时处于活动状态，而:hover伪类在用户将鼠标悬停在元素上方时处于活动状态。:active在点击时改变样式，在点击之外不再改变样式，而:focus在获得焦点时改变样式，而在失去焦点时保持样式不变。

1、:hover伪类示例：

当用户将鼠标悬停在按钮上方时，改变按钮的背景颜色和文本颜色：

button:hover {
  background-color: blue;
  color: white;
}

2、:focus伪类示例：

当用户使用Tab键或点击元素时，将元素设置为活动状态，并改变按钮的背景颜色和文本颜色：

input:focus {
  background-color: yellow;
  color: black;
}

四、如何使用:active伪类创建更复杂的交互效果？

使用JavaScript和CSS :active伪类，可以创建更复杂的交互式效果。下面是一个示例，演示如何使用:active伪类和JavaScript来创建一个交互式购物车：

<button onclick="addToCart('item1')">添加商品1到购物车</button>
<button onclick="addToCart('item2')">添加商品2到购物车</button>
<button onclick="checkout()">结账</button>
<div id="cart">
  购物车为空
</div>
<style>
  button:active {
    background-color: green;
    color: white;
  }
  #cart {
    display: none;
  }
  #cart.active {
    display: block;
    position: absolute;
    top: 50px;
    right: 50px;
    background-color: white;
    border: 1px solid black;
    padding: 10px;
  }
</style>
<script>
  var cart = [];
  function addToCart(item) {
    cart.push(item);
    document.querySelector('#cart').innerHTML = '购物车: ' + cart.join(', ');
  }
  function checkout() {
    document.querySelector('#cart').classList.toggle('active');
  }
</script>

在这个示例中，当用户点击“添加到购物车”按钮时，脚本将商品添加到购物车数组中，并将数组显示在#cart元素中。用户可以点击“结账”按钮来查看他们购买的项目。当用户点击“结账”按钮时，JavaScript脚本将使用CSS :active伪类将购物车显示在屏幕上。

五、:active伪类的注意事项

请记住，:active只在激活状态下应用样式。因此，如果您想要样式在其他状态下可见，请使用其他CSS伪类。此外，与其他CSS样式相同，:active的优先级也很重要。如果在较高的优先级下定义了相同的样式，则将使用较高优先级的样式。

1、在:active伪类中避免重复定义代码：

a:link {...}
a:visited {...}
a:hover {...}
a:active {...}  /* 避免重复定义 */

2、IE8及更早版本中的限制：

IE8及更早版本不支持在元素上使用:hover和:active伪类，但市场份额已经非常小了。如果您需要支持这些浏览器，请考虑使用JavaScript来模拟这些效果。

六、结论

在设计交互式网站时，:active是一个非常有用的CSS伪类。它允许您在用户与您的网站交互时更改元素的外观。请牢记，:active只在元素处于激活状态时应用样式，并且只应在元素处于激活状态时应用样式。

推荐文章