CSS层次选择器

1.后代选择器

body h1{
        background: red;
    }

选择body下的所有h1标签并设定属性

2.子选择器

  body>h1{
        background: aqua;
    }

选择body下的最外层所属的所有h1并设定属性

3.相邻兄弟选择器

.a1 +h1{
        background: aquamarine;
    }

<h1 >text1</h1>
<h1 class="a1">text2</h1>
<h1>text3</h1>
<h1>text4</h1>

这时只有text3会生效，

即：在标明class下的相同标签的仅一个元素中生效，对下不对上

4.通用选择器

 .a1~h1{
        background: red;
    }

<h1 >text1</h1>
<h1 class="a1">text2</h1>
<h1>text3</h1>
<ul>
    <li>
        <h1>aaa</h1>
    </li>
</ul>
<h1>text4</h1>
<h1>text5</h1>

这时生效的是text3、text4、text5,即class下的同一层次的所有相同标签生效。