如何在 CSS 中使用屬性選擇器設定特定標籤的樣式？

如何使用屬性選擇器設定特定標籤的樣式

使用HTML 表單時，您可能會發現需要套用獨特樣式的情況是基於其關聯輸入元素的特定標籤。在 CSS 中，您可以透過使用屬性選擇器來實現此目的。

使用「for」屬性來選擇屬性

在您的範例中，您想要根據其「for」屬性的值。操作方法如下：

label[for="email"] {
  /* Styles here will apply only to the label with the "for" attribute value set to "email" */
}

此選擇器會符合任何具有「for」屬性且值為「email」的標籤元素。然後，您可以在區塊內套用自訂樣式。

實作範例

• CSS:

  label[for="email"] {
    color: red;
  }

  CSS:

• JavaScript透過DOM:

  const emailLabel = document.querySelector("label[for=email]");
  emailLabel.style.color = "blue";

• 透過jQuery 的JavaScript:

  $("label[for=email]").css("color", "green");

注意： 現代瀏覽器支援屬性選擇器，但請注意與舊版的 Internet Explorer。考慮使用類別或其他結構方法來支援舊版瀏覽器。

以上是如何在 CSS 中使用屬性選擇器設定特定標籤的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！