如何定位具有任意值属性的 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中文网其他相关文章！