我可以比较 CSS 选择器中的两个属性吗？

问题描述 投票：0回答：2

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

我希望能起作用：

[data-valueA=data-valueB]

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

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

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

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

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

css css-selectors
2个回答
6
投票

这对于标准 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>



    





      

      
      
      

      

        

          

            

              
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


    

      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.