后代选择器和子选择器

后代选择器

什么是后代选择器

找到标签的后代标签，设置属性。

格式：

标签名称1 标签名称2 ....{
属性：值;
}

先找到名称叫做标签1的标签，然后再这个标签下面去查找所有名称叫做标签2的标签一直找下去，然后设置属性。

注意点：

1.后代选择器必须使用空格隔开。

2.后代不仅仅是儿子，也包括孙子。。。。只要是放在这个标签内的都是后代。

3.后代选择器不仅仅可以使用标签的名称，还可以使用其他选择器，比如使用类/id名称来代替标签名。但是必须有后代。标签可以用类名或者/id名，但是#和.都不能漏掉，中间还有一个空格。

.cl .ca {
    color: greenyellow;
}

4.可以有多层嵌套，如果不能使用id/class选择器,需要标签一层层寻找。

div ul li p {
    color: aqua;
}

<div class="cl">
    <ul>
        <li>
            <p class="ca">我是段落</p>
        </li>
    </ul>
</div>

先在div中找ul ,ul中再找li,最后li里找p标签。层层递进。

子选择器

什么是子选择器

先找到指定标签中所有特定的直接子元素，然后设置属性。比如div标签下有4个p标签，其中两个红色，另外两个蓝色，如果不能直接使用class/id属性，后代选择器无法满足，所以有了子选择器。

格式

标签名称1>标签名称2{
属性:值;
}

div>p {
    color: skyblue;
}

<p>我是段落</p>
<div class="cl">
    <p>我是段落</p>
    <ul>
        <li>
            <p>我是段落</p>
        </li>
    </ul>
    <p>我是段落</p>
</div>
<p>我是段落</p>

div标签中的p全部为skyblue颜色。

注意点

1.子元素选择器只会找儿子，不会查找其他被嵌套的标签。

2.子元素选择器之间需要>符号连接，之间不能有空格。

3.子选择器不仅仅可以选择使用标签名称，还可以使用其他选择器。

4.子元素选择器可以一直递归下去。

id选择器

#dv>p {
    color: skyblue;
}

class选择器

.cl>p {
    color: green;
}

标签选择器（递归）

div>ul>li>p {
    color: brown;
}

子选择器和后代选择器

区别

1.后代选择器使用空格作为连接符号，子选择器使用>作为连接符号。

2.后代选择器会选中指定标签中，所有的特定标签（包括儿子、孙子，从孙子。。。。），而子选择器只选中特定标签中的儿子标签。

共性

1.后代选择器和子选择器都可以使用标签名称/id名称/class名称来作为选择器名称。

2.后代选择器和子选择器都可以通过各自的连接符号一直递归下去