CSS 选择器比较 2 个属性

Question

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

我希望会起作用：

[data-valueA=data-valueB]

当我提前知道 valueA 和 valueB 时，我可以这样做：

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

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

这是一个可以探索的小提琴：https : //jsfiddle.net/rainabba/m49e4e7k/

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

Answer 1

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

虽然你没有确切问：“那么在这种情况下，有什么可怎么办？”，留下了自己的感觉这个答案完全不够的，所以在这里也就是对一些可能做的伎俩一个jQuery的解决方案。

假设您只查找divs，下面的代码将起作用。否则，您可以将 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>