​

一、定义

复合选择器是建立在基础选择器的基础上的，对基本选择器进行组合形成的

复合选择器可以更精确的，更高效的选择目标元素（标签），精确指出想要选择的标签，避免多选，错选。

复合选择器是由两个或多个基础选择器，通过不同方式组合而成的

常用的复合选择器：

• 后代选择器
• 子选择器
• 并集选择器
• 伪类选择器

二、后代选择器

1、标签选择器的后代

<ol>
    加倍方法
    <li>我是ol 的孩子</li>
    <li>我是ol 的孩子</li>
    <li>我是ol 的孩子</li>
    <li><a href="#">我是孙子</a></li>
</ol>

像这种情况下，我们要选择里面的a标签的话，需要用到后代选择器来定位，而不是给全部的li标签都加属性，当然style属性是添加在head标签里面的，没写在body标签里面

<style>
    ol li a {
        color: red;
    }

</style>

2、类选择器+标签选择器的后代

像这样：

<ul class="nav">
    <li>我是ul 的孩子</li>
    <li>我是ul 的孩子</li>
    <li>我是ul 的孩子</li>
    <li><a href="#">不会变化的</a></li>
</ul>

既有类选择器，又有标签选择器的，我们需要通过后代选择器，逐层深入，精确定位我们想要的添加属性标签位置

<style>
    .nav li a {
        color: yellow;
    }
</style>

特点：

• 在后代选择器中，多个元素之间是用空格隔开的，
• 元素1是父级，元素2是自己，则最终选择是元素2
• 元素2可以是儿子，也可以是孙子，只要是元素1的后代即可
• 元素1和元素2可以是任意基础选择器 
  ​