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>
