Question

我正在处理一个页面，其中列表中的所选项目的特征是没有给定的类。类似于以下内容：

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

我想定义一个CSS选择器来获取只有a类的页面中的li节点。不足为奇的是，以下语句是不够的：

document.querySelectorAll('li.a')

因为它返回所有具有 a 类的 li 节点。

在这种情况下有经验吗？

Answer 1

在这种情况下，您可以考虑使用以下属性选择器：

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

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

<ul>
  <li class="a">Select me</li>
  <li class="a b c d more classes">Don't select me</li>
  <li class="a b">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="a b">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="a b">Don't select me</li>
  <li class="a">Select me</li>
</ul>

Answer 2

在这种情况下，除了Temanis answer之外，您还可以使用subscribe选择器

not

Answer 3

您可以使用：not（）伪指令，这正是您需要的工作。

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

所以您要做的就是

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

但是也可以考虑使用jQuery，例如

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

Stansard querySelector更快，jQ更具可读性。

独家CSS选择器

3 个答案: