css-选择器.class1.class2样例详解
0.前提
注意:大多数情况看w3c等教程即可,但是对于.class1.class2和.class1 .class2疑惑,自己动手试试即可看出;
此外不推荐“.name1.name2”这样的属性名字!
1.先说结论
(1).class1.class2 是标签calss名字中有空格区分,class1和class2必须是标签类名以空格划分的字符串,不一定匹配第一个字符串,详细看一下代码一目了然!
2.样例-及其可视化
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<style>
.test01.test03 {
background-color: red;
height: 50px;
border: solid 1px;
}
.test01.test06 {
background-color: blue;
height: 100px;
border: solid 1px;
}
.test03.test06 {
background-color: green;
height: 150px;
border: solid 1px;
}
.test03 {
background-color: salmon;
}
.test03 .test02 {
height: 30px;
background-color: yellow;
}
a {
color: red;
}
</style>
<script>
window.onload = function() {
var divButton = document.getElementById("test01");
divButton.classList.add("active");
}
</script>
</head>
<body>
<div id="test01" class="test012 test03 test06">
<div class="test02">
<a href="https://github.com/gengyanlei">gengyanlei's github</a>
</div>
</div>
</body>
</html>
最终结果如下