如何比较两个 CSS 选择器？

Question

如何比较 Javascript 上的两个 CSS 选择器？

例如：

compare('.foo.bar', '.bar.foo')

返回true ，

compare('.foo.bar', '.foo .bar')

返回false

Answer 1

 '.foo.bar' is not the same as '.foo .bar'

注意'.foo .bar'的空格

例如：

<div class="foo"><p class="bar"></p></div>  The tag P matches '.foo .bar'

<div class="foo bar"><p class="bar"></p></div>  The tag DIV matches '.foo.bar'

对于那些寻求比较功能的人，您可以使用http://api.jquery.com/is/

 document.body.textContent = $('.foo.bar').is('.bar.foo')

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="foo bar"></div>

香草JS解决方案：

 document.body.textContent = compareSelector('.foo.bar', '.bar.foo'); function compareSelector (s1, s2) { var a = document.querySelectorAll(s1); var b = document.querySelectorAll(s2); if (a.length !== b.length) return false; else { for(var i=0; i<a.length; i++){ if (a[i] !== b[i]) return false; } } return true; }

 <div class="foo bar"></div> <p class="bar foo"></p>