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

在 CSS 中使用屬性值定位元素

CSS 讓開發人員能夠根據屬性選擇特定元素。雖然定位具有預定義屬性值的元素很簡單，但將其擴展到任何屬性值可能具有挑戰性。

問題陳述

我們可以選擇具有任何屬性值的元素嗎？類似於：

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>

解決方案

要定位任何非空屬性值，請使用下列選擇器：

a[rel]
{
    color: red;
}

此選擇器將匹配所有帶有'rel' 屬性的錨標記。

處理空Values

但是，如果要求區分空和非空屬性值，請引入CSS ':not' 偽類：

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

這個選擇器將選擇「rel」屬性不為空的錨標記。

其他注意

預設情況下，具有「href」屬性的 HTML 錨標記會套用「遊標：指標」樣式。此功能強調了根據任何屬性值的存在選擇元素的可能性。

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