选择属性值与不同元素的属性值匹配的元素[重复]答案

【问题标题】：Select elements with attribute value matching attribute value of different element [duplicate]选择属性值与不同元素的属性值匹配的元素[重复]
【发布时间】：2018-04-17 08:47:28
【问题描述】：

使用 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>

此列表也可能包含任何内容，但可能包含具有相同 href="foo.bar" 的 <a> 元素。

我希望能够选择列表中具有href 属性的<a> 元素与任何<a class="important"> 的href 属性匹配

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

【问题讨论】：

您不仅可以使用匹配[attr="value"] 的选择器，还可以对可能增加匹配元素范围的值执行部分操作。前任。 [title^="Java"] ^= 表示该值以...开头，因此选择器意味着查找具有title 属性的元素，该属性具有任何以“Java”开头的值，因此<div title="Java"> 和<span title="JavaScript"> 都将匹配。

标签： html css css-selectors

【解决方案1】：

是的，

语法

[{attri}={value}]

喜欢这个

.important{
   color:#0f0;
}

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

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

Mozilla Documentation - Attribute selectors

【讨论】：

这匹配 .important 元素本身，而不是其他元素。当然，你可以写类似 .important[href="bar.foo"] ~ ul a[href="bar.foo"] 之类的东西，假设 ul 是 .important 的下一个兄弟，但这忽略了我想的问题。