多class层级选择元素以及模糊匹配

css选择器

• 选择class1元素下class2的元素

<!--html-->
<div class="class1">
  <div class="class2" />
</div>

// css（中间有空格）
.class1 .class2{
  color:#000;
}

• 选择同时含有class1和class2的元素

<!--html-->
<div class="class1 class2" />

// css（中间没有空格）
.class1.class2{
  color:#000;
}

• 选择class1和class2的元素

<!--html-->
<div class="class1" />
<div class="class2" />

// css（中间有逗号）
.class1,.class2{
  color:#000;
}

js通过class获取元素

js获取元素的方法有很多，以querySelectorAll()方法为例：

<!--html-->
<div class="class1 class2" />

• 获取class为class1 class2的所有div

document.querySelectorAll("div[class='class1 class2']");
// document.querySelectorAll(".class1.class2");

• class前缀为class1的所有div

document.querySelectorAll("div[class^='class1 class2']");

• class后缀为class2的所有div

document.querySelectorAll("div[class$='class2']");

• class中包含class1的所有div

document.querySelectorAll("div[class*='class1']");