如何定位具有任意值屬性的 CSS 元素？

在 CSS 中定位具有任意值屬性的元素

在 CSS 中，通常需要根據元素的屬性來定位元素。雖然選擇具有特定屬性值的元素很簡單，但定位具有任意屬性值的元素可能更具挑戰性。

問題：選擇具有任意屬性的元素

我們如何才能具有任意值屬性的目標元素（除非該屬性尚未添加到元素中）？例如，我們希望定位任何具有“rel”屬性值的錨標記。

答案：使用帶有空值的屬性選擇器

來實現為此，我們可以使用帶有空值的屬性選擇器。以下CSS 規則針對定義了「rel」屬性的任何錨標記：

a[rel] {
    color: red;
}

此規則將符合以下HTML 中的第一個和第三個錨標記：

<a href="#" rel="eg">red text</a>
<a href="#">standard text</a>
<a href="#" rel="more">red text again</a>

更新：區分空值和非空值

在某些情況下，可能有必要區分具有空屬性值的元素和具有非空值的元素。為此，我們可以使用CSS“：not”偽類：

a[rel]:not([rel=""]) {
    color: red;
}

此規則僅針對具有非空“rel”屬性值的錨標記。

以上是如何定位具有任意值屬性的 CSS 元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！