如何使用 CSS 選擇器為具有相似類別名稱的多個 Div 設定樣式？

在CSS 類別中使用通配符

在您的查詢中，您的目標是使用公共類別「tocolor」來設定多個div 的樣式，同時包含唯一識別碼（例如，tocolor-1 ，著色-2)。您嘗試在 CSS 中使用通配符“*”來簡化此操作，但事實證明不成功。

為了達到您想要的結果，我們在 CSS 中引入了屬性選擇器。屬性選擇器可讓您根據特定屬性（例如類別值）來定位元素。

對於您的場景，您可以使用以下CSS 選擇器：

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

其工作原理如下：

• [class^="tocolor-" ]：此選擇器符合class 屬性以以下開頭的元素"tocolor-".
• [class*=" tocolor-"]：此選擇器符合類別屬性在字串中任意位置包含「tocolor-」的元素，前面有一個空格字元。

透過組合這兩個選擇器，您可以使用滿足這些條件之一的類別來定位任何元素。

例如，給定以下 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>

套用上面的 CSS 選擇器會將所有這些 div 的顏色設為紅色。

在JSFiddle 上查看此互動式演示：http://jsfiddle.net/K3693 /1/

有關CSS 屬性選擇器的更全面的信息，請參閱以下內容資源：

• CSS屬性選擇器（W3Schools）：https://www.w3schools.com/cssref/css_selectors.asp
• 屬性選擇器（MDN Web 文件）：https://www.w3schools.com/cssref/css_selectors .asp

以上是如何使用 CSS 選擇器為具有相似類別名稱的多個 Div 設定樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！