1、组合选择器（h1,h2）
2、层级选择器（.box2 h1,.box2 h2）
3、伪类选择器（添加行为）（.box3:hover）
4、伪类选择器（添加元素）（.box4 h1::after）
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>层级选择器</title>
<style>
/* 1、组合选择器 */
h1,
h2 {
color: black;
}
/* 2、层级选择器 */
.box2 h1,
.box2 h2 {
color: red;
}
/* 3、伪类选择器（添加行为） */
.box3 {
width: 100px;
height: 100px;
background-color: antiquewhite;
}
.box3:hover {
background-color: aquamarine;
}
/* 4、伪类选择器（添加元素） */
.box4 h1::after {
content: 'jasmine!';
color:red;
}
</style>
</head>
<body>
<!-- 1、组合选择器 -->
<div class="box1">
<h1>Hello world!</h1>
</div>
<!-- 2、层级选择器 -->
<div class="box2">
<h1>Hello H1!</h1>
<h2>Hello H2!</h2>
</div>
<!-- 3、伪类选择器（添加行为） -->
<div class="box3"></div>
<!-- 4、伪类选择器（添加元素） -->
<div class="box4">
<h1>Hello,</h1>
</div>
</body>
</html>
版权声明：本文为weixin_45065754原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。