下面的示例将向您介绍如何在一行中同时选择多个嵌套类选择器和直接类选择器

//以下是选择器的说明//.a.b.c=选择div a和b内部的嵌套子c//.a.d=选择div a内部的嵌套子d//.f=选择直接元素，即div f，它在div a和b之外$（'.a.b.c，.a.d，.f'）.css（'背景颜色'，'灰色'）；<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><div class=“a”>a<div class=“b”>b<div class=“c”>c</div></div><div class=“d”>d</div></div><div class=“e”>e</div><div class=“f”>f</div>

您可以根据需要使用getElementsByClassName（）方法。

var elems=document.getElementsByClassName（“a b c”）；elems[0].style.color=“绿色”；console.log（elems[0]）；＜ul＞<li class=“a”>a</li><li class=“a b”>a，b</li><li class=“a b c”>a、b、c</li></ul>

这也是最快的解决方案。你可以在这里看到一个基准。

如果您希望只匹配两个类的元素（交集，如逻辑AND），只需将选择器写在一起，其间不留空格：

$('.a.b')

顺序不相关，因此您也可以交换类：

$('.b.a')

因此，要将ID为a的div元素与类b和c相匹配，您可以编写：

$('div#a.b.c')

（在实践中，您很可能不需要获得特定的ID，而ID或类选择器本身通常就足够了：$（“#a”）。）

可以使用filter（）函数执行此操作：

$(".a").filter(".b")

Vanilla JavaScript解决方案：-

document.querySelectorAll（'.a.b'）

var elem=document.querySelector（“.a.b”）；