CSS 选择器比较 2 个属性

Question

我正在寻找一种方法来构建一个选择器，该选择器可以匹配两个具有相同值的属性，但找不到语法。这可能吗？怎么办？

我希望的是:

[data-valueA=data-valueB]

当我提前知道 valueA 和 valueB 时，我可以:

[data-valueA="knownValueForA"][data-valueB="knownValueForB"] {}

但我不知道这些值，在这种情况下也不关心它们，只知道它们何时相同。

这里有一个 fiddle 可供探索:https://jsfiddle.net/rainabba/m49e4e7k/

澄清一下，我正在寻找纯 CSS 解决方案。

Answer 1

这在标准 CSS 中是不可能的。

虽然您没有确切地问“那么，在那种情况下，我可以做什么？”，留下这个答案本身感觉完全不够，所以这里还有一个 jQuery 解决方案，用于可能做这个把戏。

假设您只查找 div，下面的代码将起作用。否则，您可以将 jQuery 第一行中的选择器编辑为 $("div")

以外的内容

    $("[data-valueA]").each(function() {
        $this = $(this);
        var firstAttr = $this.data("valuea");
        var secondAttr = $this.data("valueb");
        if (firstAttr == secondAttr) $this.addClass("redBackground");
    });

  div {
      padding: 20px;
      margin: 20px;
      border: 1px solid black;
  }
  
  .redBackground {
      background-color: red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-valueA="MyValue" data-valueB="MyValue">
    ValueA and ValueB match
</div>

<div data-valueA="XXX" data-valueB="YYY">
    ValueA and ValueB do not match
</div>