关系选择器

四种分类

后代选择器

子代选择器

相邻兄弟选择器

通用兄弟选择器

后代选择器

某个元素后的某个子元素，只要是它的后代，都会继承它的样式，中间用空格隔开，常见的如：序列，ul li {这是样式}

ul li {
    color: blue;
}

    <ul>
        <li>儿子 </li>
        <li>儿子 </li>
        <li>儿子</li>
        <ol>
            <li>孙子</li>
            <li>孙子</li>
            <span>这是P标签</span>
        </ol>
        </li>
    </ul>

子代选择器

某个元素后的子元素，只要是它的子代，都会继承它的样式，中间用>隔开，常见的如：序列，ul>li {这是样式}

div>a {
    text-decoration: none;
    color: rgb(29, 131, 226);
}

<div>
    <a href="#">子元素1</a>
    <p><a href="#">孙元素2</a></p>
    <a href="#">子元素3</a>
</div>

相邻兄弟(用的不多)

选择器中某个元素，用加号表示，向下选择相邻的第一个兄弟元素，上面的元素也是不起作用的。

h2+P {
    color:blue;
}

<div>
    <h2>是相邻兄弟，就变成蓝色</h2>
    <p>我是相邻第一个P标签</p>
    <p>我是相邻第2个P标签</p>
</div>

通用兄弟选择器

选择某个元素下的某一类元素，作用于多个，被称为兄弟。用~隔开，只能向下选择，不能嵌套。

h2~P {
    color:blue;
}

<div>
    <p>我是相邻第3个P标签</p>
    <h2>通用兄弟选择器</h2>
    <p>我是相邻第1个P标签</p>
    <span>这是插播的一个span标签</span>
    <p>我是相邻第2个P标签</p>
</div>

区别

后代选择器效果​​ul li {}​​指的是选择器中的某一个元素，只要在它下方的不管如何嵌套都受它影响；

子代选择器效果 ​​ul>li {}​​指的是选择器只能影响其直接的子元素，对更深一层的嵌套不起作用；

相邻兄弟效果 ​​ul+li {}​​指的是某个元素后的另一个元素，且只匹配第一个，其他的不生效；

通用兄弟 ​​h1~p()​​ 指的是某个元素后的某一类元素，用~隔开，匹配多个，只能向下选择，不能嵌套。