代码之家 › 专栏 › 技术社区 › Alberto De Caro ChaosPandion

独占CSS选择器

css-selectors css javascript

1

Alberto De Caro ChaosPandion · 技术社区 · 6 年前

我正在处理一个页面,其中列表中的选定项的特征是没有给定的类。如下所示:

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

document.querySelectorAll('li.a')

因为它返回所有锂一班级。

在这种情况下有什么经验吗?

3 回复 | 直到 6 年前

1

9

Temani Afif 6 年前

在这种情况下,可以考虑如下属性选择器:

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”]”)。长度)

李[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,你就可以用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)

李[class=“a”]{
color:red;
}

<<li class=“a”>注意这个</li>
<li class=“a”>选择我</li>

2

3

Johan 6 年前

除了 Temanis answer 你可以用 not 本例中的选择器

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

3

1

dkellner 6 年前

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

所以你要做的就是

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

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

Stansard querySelector速度更快,jQ可读性更强。