html - 选择属性值与不同元素的属性值匹配的元素

<分区>

使用 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 的元素与 href 匹配的属性 任何 <a class="important"> 的属性

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

最佳答案

是的，

语法

[{attri}={value}]

像这样

.important{
   color:#0f0;
}

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

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

关于html - 选择属性值与不同元素的属性值匹配的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49862848/

相关文章：

html - 固定位置相对边距移动的div :auto elements