多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']");