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

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

在您想要將 CSS 規則套用到具有共用類別的元素的情況下前綴，CSS2.1 有其限制。然而，隨著 CSS3 屬性子字串匹配選擇器的引入，它變得可行。

要實現這一點，請利用以下屬性選擇器：

• [class^=" status-"]: 匹配類別名稱以以下開頭的元素"status-".
• [class*=" status-"]:匹配類別名稱中緊接在空格字元後包含“status-”的元素。

透過組合這些選擇器，可以定位類別屬性滿足指定條件的元素，包括多個類別的情況存在：

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

需要注意的是，上述方法避免了將元素與“foo-status-bar”等類屬性相匹配，這可能是不可取的。

替代解決方案可能包括使用jQuery 或重構 HTML 標記以明確包含狀態前綴作為單獨的類別。然而，CSS3 子字串比對選擇器提供了一個強大且純 CSS 的解決方案來解決樣式規則中的類別前綴。

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