如何使用 :target 伪类修改按钮按下后的外观？

“按下”按钮选择器

当想要在按下按钮后改变其外观时，传统的 :active 选择器可能不够。此选择器仅在物理按住按钮时触发。

要实现所需的功能，另一种方法是利用 :target 伪类。当相应的锚点（在本例中为#btn）被定位时，该类将激活。

实现：

替换带有 标签的标签：

<code class="html"><a id="btn" href="#btn">Button</a></code>

调整 CSS 以合并 :active 和 :target 伪类：

<code class="css">a {
  display: block;
  font-size: 18px;
  border: 2px solid gray;
  border-radius: 100px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

a:active {
  font-size: 18px;
  border: 2px solid green;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}

a:target {
  font-size: 18px;
  border: 2px solid red;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}</code>

通过此实现，按钮将首先出现处于正常状态（白色）。单击时，它将变为绿色（活动状态）。松开按钮后，会切换到红色状态（目标状态）。

以上是如何使用 :target 伪类修改按钮按下后的外观？的详细内容。更多信息请关注PHP中文网其他相关文章！