独家CSS选择器(Exclusive CSS selector)

我工作的一个页面，列表中选定项目的特点是没有一个给定的类上。 像下面这样：

<ul>
  <li class="a">not selected</li>
  <li class="a b">selected</li>
  <li class="a">not selected</li>
</ul>

我想定义的CSS选择器抓取页面只具有一类里的节点。 不出所料下面的语句是不够的：

document.querySelectorAll('li.a')

因为它返回具有一类的所有节点里 。

在这种情况下的经验吗？

Answer 1:

在这种情况下，你可以考虑属性选择是这样的：

 console.log(document.querySelectorAll('li[class="a"]').length) 

 li[class="a"] { color:red; } 

 <ul> <li class="a">Select me</li> <li class="abcd more classes">Don't select me</li> <li class="ab">Don't select me</li> <li class="a">Select me</li> </ul> 

只是要注意多余的空格：

 console.log(document.querySelectorAll('li[class="a"]').length) 

 li[class="a"] { color:red; } 

 <ul> <li class="a ">Pay attention to this one !!</li> <li class="ab">Don't select me</li> <li class="a">Select me</li> </ul> 

但由于使用的是JS，你可以使用trim()摆脱多余的空格：

 var elem=document.querySelectorAll('li'); for(var i=0;i<elem.length;i++) elem[i].className=elem[i].className.trim(); console.log(document.querySelectorAll('li[class="a"]').length) 

 li[class="a"] { color:red; } 

 <ul> <li class="a ">Pay attention to this one !!</li> <li class="ab">Don't select me</li> <li class="a">Select me</li> </ul> 

Answer 2:

除了Temanis回答您可以使用not在这种情况下选择

document.querySelectorAll('li.a:not(.b)')

Answer 3:

您可以使用：不（）伪，这正是你所需要的这份工作。

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

因此，所有你需要做的就是

document.querySelector(".a:not(.b)")

还要考虑使用jQuery，像

$(".someclass").not(".another")

Stansard querySelector更快，JQ是更具可读性。

文章来源: Exclusive CSS selector