如何使用CSS中具有任何值的属性来定位元素？

Question

我知道我可以在CSS中定位具有特定属性的元素,例如:

input[type=text]
{
    font-family: Consolas;
}

但是是否可以定位具有任何值属性的元素(除了没有任何属性,即属性尚未添加到元素时)？

大概是这样的:

a[rel=*]
{
    color: red;
}

哪个应针对<a>此HTML中的第一个和第三个标记:

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

我认为这是可能的,因为默认情况下,cursor: pointer似乎应用于任何<a>具有其href属性值的标签.

Answer 1

以下内容将匹配任何定义rel了:not属性的nchor :

a[rel]
{
    color: red;
}

http://www.w3.org/TR/CSS2/selector.html#pattern-matching

更新: 要考虑提到的场景@vsync,在注释部分(区分emtpy /非空值),您可以合并CSS rel 伪类:

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

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

Answer 2

在CSS 3选择器中是的,有几个属性选择器.

例如

[att] 表示具有att属性的元素,无论属性的值如何.

[att = val] 表示具有att属性的元素,其值正好为"val".

[att~ = val] 表示具有att属性的元素,该属性的值是以空格分隔的单词列表,其中一个单词恰好是"val".如果"val"包含空格,它将永远不会表示任何内容(因为单词用空格分隔).此外,如果"val"是空字符串,它将永远不会代表任何东西.

[att ^ = val] 表示具有att属性的元素,其值以前缀"val"开头.如果"val"是空字符串,则选择器不代表任何内容.

[att $ = val] 表示具有att属性的元素,其值以后缀"val"结尾.如果"val"是空字符串,则选择器不代表任何内容.

[att*= val] 表示具有att属性的元素,该属性的值至少包含子字符串"val"的一个实例.如果"val"是空字符串,则选择器不代表任何内容.