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

基於前綴的 CSS 類別選擇可能嗎？

在 Web 開發領域，通常需要將 CSS 規則套用到基於元素的 CSS 規則。在特定的類別前綴上。例如，您可能想要定位類別以“status-”前綴開頭的元素。

無法使用 CSS2.1 做到這一點

不幸的是，CSS2 .1沒有提供任何直接的方法來實現基於前綴的類別選擇。然而，CSS3 屬性子字串匹配選擇器來拯救我們。

CSS3 基於前綴的選擇

CSS3 引入了兩個可以幫助我們的屬性選擇器：

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

細分選擇器：

• [class^="status-"] - 符合類別屬性以「status-」開頭的元素。
• [class*=" status-" ] - 匹配類別屬性在空格分隔的字串中包含「status-」的元素。

組合這兩個選擇器確保我們捕獲所有適當的元素，即使是那些具有多個空格分隔的類別的元素。

另一個問題

請注意，只要使用 [class*="status-" ]也可能匹配以下元素：

<div>

為了避免這種情況，最好將兩個選擇器組合起來，如圖所示

其他選項

如果您可以控制HTML 標記，更簡單的方法是將狀態前綴分離到自己的類別中，例如：

<div>

這允許您以 [class="status-important"] 為目標元素。

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