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