多class層級選擇元素以及模糊比對

• css選擇器
• js通過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

• class字尾為

  class2

  的所有div

• class中包含

  class1

  的所有div