CSS 選擇器可以根據類別前綴定位元素嗎？

依類別前綴的CSS 選擇器

問題：

問題：

<div>

我們可以套用一條規則，只針對類別以「status-」開頭的 div 嗎？

答案：

CSS 2.1:

在 CSS 2.1 中，這是不可能的。

CSS 3:

div[class^="status-"], div[class*=" status-"]

• CSS3 引入了屬性子字串匹配選擇器，使得這possible:

[class ^="status-"] 符合class 屬性以「status-」開頭的元素。

[class*=" status-" ] 匹配類別屬性在空格字元後面直接包含「status-」的元素（確保它不是另一個單字的一部分）。

注意後一個選擇器包含有意的空格字符，因為類別名稱通常由空格分隔。這會檢查元素的類別屬性中的任何其他類，並處理類別屬性以空格填充的情況。

如果您可以保證您的標記永遠不會有狀態前綴嵌入到另一個單字中的元素，那麼您可以將選擇器簡化為 [class*="status-"]。但是，為了穩健性，建議組合使用兩個選擇器。 或者，如果您可以控制 HTML 生成，則建立具有所需前綴的專用「狀態」類別可能會更容易。

以上是CSS 選擇器可以根據類別前綴定位元素嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！