Question

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

我希望能起作用：

import { hello } from 'some-js-lib'

hello('world!')

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

[data-valueA=data-valueB]

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

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

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

Answer 1

使用标准CSS无法做到这一点。

虽然你没有完全问过＆＃34;那么在那种情况下，可以我做什么？＆＃34;，留下这个答案本身感觉完全不够，所以这里＆＃39; s也是一个可以解决问题的jQuery解决方案。

假设您仅查找div，则以下代码将起作用。否则，您可以在jQuery的第一行编辑选择器，使其不是$("div")

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

没什么用处，但如果您知道属性值不会超过一定长度，并且可能的字符集有限，您可以通过编程方式生成所有可能性。

例如，字符为abc且最大长度为4，

[data-valueA=""][data-valueB=""],
[data-valueA="a"][data-valueB="a"],
[data-valueA="aa"][data-valueB="aa"],
[data-valueA="aaa"][data-valueB="aaa"],
[data-valueA="aaaa"][data-valueB="aaaa"],
[data-valueA="aaab"][data-valueB="aaab"],
[data-valueA="aaac"][data-valueB="aaac"],
[data-valueA="aab"][data-valueB="aab"],
[data-valueA="aaba"][data-valueB="aaba"],
[data-valueA="aabb"][data-valueB="aabb"],
[data-valueA="aabc"][data-valueB="aabc"],
[data-valueA="aac"][data-valueB="aac"],
[data-valueA="aaca"][data-valueB="aaca"],
[data-valueA="aacb"][data-valueB="aacb"],
[data-valueA="aacc"][data-valueB="aacc"],
[data-valueA="ab"][data-valueB="ab"],
[data-valueA="aba"][data-valueB="aba"],
[data-valueA="abaa"][data-valueB="abaa"],
[data-valueA="abab"][data-valueB="abab"],
[data-valueA="abac"][data-valueB="abac"],
[data-valueA="abb"][data-valueB="abb"],
[data-valueA="abba"][data-valueB="abba"],
[data-valueA="abbb"][data-valueB="abbb"],
[data-valueA="abbc"][data-valueB="abbc"],
[data-valueA="abc"][data-valueB="abc"],
[data-valueA="abca"][data-valueB="abca"],
[data-valueA="abcb"][data-valueB="abcb"],
[data-valueA="abcc"][data-valueB="abcc"],
[data-valueA="ac"][data-valueB="ac"],
[data-valueA="aca"][data-valueB="aca"],
[data-valueA="acaa"][data-valueB="acaa"],
[data-valueA="acab"][data-valueB="acab"],
[data-valueA="acac"][data-valueB="acac"],
[data-valueA="acb"][data-valueB="acb"],
[data-valueA="acba"][data-valueB="acba"],
[data-valueA="acbb"][data-valueB="acbb"],
[data-valueA="acbc"][data-valueB="acbc"],
[data-valueA="acc"][data-valueB="acc"],
[data-valueA="acca"][data-valueB="acca"],
[data-valueA="accb"][data-valueB="accb"],
[data-valueA="accc"][data-valueB="accc"],
[data-valueA="b"][data-valueB="b"],
[data-valueA="ba"][data-valueB="ba"],
[data-valueA="baa"][data-valueB="baa"],
[data-valueA="baaa"][data-valueB="baaa"],
[data-valueA="baab"][data-valueB="baab"],
[data-valueA="baac"][data-valueB="baac"],
[data-valueA="bab"][data-valueB="bab"],
[data-valueA="baba"][data-valueB="baba"],
[data-valueA="babb"][data-valueB="babb"],
[data-valueA="babc"][data-valueB="babc"],
[data-valueA="bac"][data-valueB="bac"],
[data-valueA="baca"][data-valueB="baca"],
[data-valueA="bacb"][data-valueB="bacb"],
[data-valueA="bacc"][data-valueB="bacc"],
[data-valueA="bb"][data-valueB="bb"],
[data-valueA="bba"][data-valueB="bba"],
[data-valueA="bbaa"][data-valueB="bbaa"],
[data-valueA="bbab"][data-valueB="bbab"],
[data-valueA="bbac"][data-valueB="bbac"],
[data-valueA="bbb"][data-valueB="bbb"],
[data-valueA="bbba"][data-valueB="bbba"],
[data-valueA="bbbb"][data-valueB="bbbb"],
[data-valueA="bbbc"][data-valueB="bbbc"],
[data-valueA="bbc"][data-valueB="bbc"],
[data-valueA="bbca"][data-valueB="bbca"],
[data-valueA="bbcb"][data-valueB="bbcb"],
[data-valueA="bbcc"][data-valueB="bbcc"],
[data-valueA="bc"][data-valueB="bc"],
[data-valueA="bca"][data-valueB="bca"],
[data-valueA="bcaa"][data-valueB="bcaa"],
[data-valueA="bcab"][data-valueB="bcab"],
[data-valueA="bcac"][data-valueB="bcac"],
[data-valueA="bcb"][data-valueB="bcb"],
[data-valueA="bcba"][data-valueB="bcba"],
[data-valueA="bcbb"][data-valueB="bcbb"],
[data-valueA="bcbc"][data-valueB="bcbc"],
[data-valueA="bcc"][data-valueB="bcc"],
[data-valueA="bcca"][data-valueB="bcca"],
[data-valueA="bccb"][data-valueB="bccb"],
[data-valueA="bccc"][data-valueB="bccc"],
[data-valueA="c"][data-valueB="c"],
[data-valueA="ca"][data-valueB="ca"],
[data-valueA="caa"][data-valueB="caa"],
[data-valueA="caaa"][data-valueB="caaa"],
[data-valueA="caab"][data-valueB="caab"],
[data-valueA="caac"][data-valueB="caac"],
[data-valueA="cab"][data-valueB="cab"],
[data-valueA="caba"][data-valueB="caba"],
[data-valueA="cabb"][data-valueB="cabb"],
[data-valueA="cabc"][data-valueB="cabc"],
[data-valueA="cac"][data-valueB="cac"],
[data-valueA="caca"][data-valueB="caca"],
[data-valueA="cacb"][data-valueB="cacb"],
[data-valueA="cacc"][data-valueB="cacc"],
[data-valueA="cb"][data-valueB="cb"],
[data-valueA="cba"][data-valueB="cba"],
[data-valueA="cbaa"][data-valueB="cbaa"],
[data-valueA="cbab"][data-valueB="cbab"],
[data-valueA="cbac"][data-valueB="cbac"],
[data-valueA="cbb"][data-valueB="cbb"],
[data-valueA="cbba"][data-valueB="cbba"],
[data-valueA="cbbb"][data-valueB="cbbb"],
[data-valueA="cbbc"][data-valueB="cbbc"],
[data-valueA="cbc"][data-valueB="cbc"],
[data-valueA="cbca"][data-valueB="cbca"],
[data-valueA="cbcb"][data-valueB="cbcb"],
[data-valueA="cbcc"][data-valueB="cbcc"],
[data-valueA="cc"][data-valueB="cc"],
[data-valueA="cca"][data-valueB="cca"],
[data-valueA="ccaa"][data-valueB="ccaa"],
[data-valueA="ccab"][data-valueB="ccab"],
[data-valueA="ccac"][data-valueB="ccac"],
[data-valueA="ccb"][data-valueB="ccb"],
[data-valueA="ccba"][data-valueB="ccba"],
[data-valueA="ccbb"][data-valueB="ccbb"],
[data-valueA="ccbc"][data-valueB="ccbc"],
[data-valueA="ccc"][data-valueB="ccc"],
[data-valueA="ccca"][data-valueB="ccca"],
[data-valueA="cccb"][data-valueB="cccb"],
[data-valueA="cccc"][data-valueB="cccc"]

我用这段代码生成了它：

function generateString(chars, maxLen) {
  var current = new Array(maxLen);
  return function* main(pos) {
    yield current.join('');
    if (pos == maxLen) return;
    for (let ch of chars) {
      current[pos] = ch;
      yield* main(pos+1);
    }
    current[pos] = '';
  }(0);
}
for (let value of generateString("abc", 4)) {
  value = CSS.escape(value);
  document.write('[data-valueA="'+value+'"][data-valueB="'+value+'"],<br />');
}

当然，这在实践中变得非常荒谬。如果你想允许26个拉丁字母小写和大写，10个数字和2个附加符号，那就是64个可能的字符。最大长度为10，有以下几种可能性：

64^0 + 64^1 + ... + 64^10 = 1.171221845949812801 * 10^18

CSS Selector比较2个属性

2 个答案: