如何使用 :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中文網其他相關文章！