如何使用通配符和 CSS 屬性選擇器為具有多個唯一識別碼的元素設定樣式？

在CSS 中使用通配符設定具有多個唯一識別碼的元素樣式

在前端開發中，通常需要基於公共類別和唯一識別碼來設定元素樣式。考慮以下場景：

我們有多個 div，希望使用類別「.tocolor」將其設定為紅色背景。然而，我們還需要用一個數字來唯一標識每個 div（例如，tocolor-1、tocolor-2、tocolor-3）。

最初，我們嘗試使用通配符來簡化樣式，如下所示：

.tocolor-* {
  background: red;
}

但是，這個方法並沒有起作用。這個問題的解決方案在於 CSS 屬性選擇器。透過定位元素的類別屬性，我們可以根據特定模式設定元素的樣式。

用於使用通配符進行樣式設定的屬性選擇器

在此場景中可以使用兩種類型的屬性選擇器：

• [ attribute^="value"]: 符合屬性以指定值。
• [attribute*="value"]: 符合屬性包含指定值的元素。

對於給定的HTML 結構：

<div class="tocolor tocolor-1">   tocolor 1   </div>
<div class="tocolor tocolor-2">   tocolor 2   </div>
<div class="tocolor tocolor-3">   tocolor 3   </div>
<div class="tocolor tocolor-4">   tocolor 4   </div>

我們可以使用以下屬性選擇器:

div[class^="tocolor-"], div[class*=" tocolor-"] {
  background: red;
}

• [class ^="tocolor-"]: 符合所有class 屬性以「tocolor-」開頭的div。
• [class*=" tocolor-"]: 符合 class 屬性包含子字串的所有 div "tocolor-".

使用和示範

透過使用這些屬性選擇器，我們可以根據通用的「.tocolor」類別和唯一識別碼有效地設定元素的樣式，如圖所示在以下示範：

[直播示範](http://jsfiddle.net/K3693/1/)

進一步學習資源

• CSS屬性選擇器：https://developer.mozilla.org/en -US/docs/Web/CSS/Attribute_selectors
• 關於屬性選擇器的MDN 文件： https://developer.mozilla.org/en -US/docs/Web/CSS/Attribute_selectors

以上是如何使用通配符和 CSS 屬性選擇器為具有多個唯一識別碼的元素設定樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！