Question

使用CSS选择器，是否可以选择属性值与另一个指定元素的属性值相同的元素？例如：

<a class="important" href="foo.bar"></a>

将始终显示在页面上，但href可能是任何内容。然后页面上的内容可能是这样的：

<li>
    <a href="bar.foo"></a>
    <a href="foo.bar"></a>
    <a href="bar.bar"></a>
    <a href="foo.bar"></a>
</li>

此列表可能包含任何内容，但可能包含<a>个href="foo.bar"元素。

我希望能够在列表中选择<a>属性与href的{{1}}属性相匹配的href元素

单独使用CSS是否可行？我知道这当然可以在javascript中完成，确保列表中的特定<a class="important">元素是使用类属性创建的，但是如果有纯CSS解决方案我会感兴趣。

Answer 1

是的，

语法

[{attri}={value}]

像这样

.important{
   color:#0f0;
}

.important[href="bar.foo"]{
   color:#00f;
}

.important[href="bar.bar"]{
   color:#f00;
}