CSS复合选择器：后代选择器

复合选择器：后代选择器

格式：元素1 元素2 { 样式内容}
1、后代选择器中外层是父级，内层是子级，子级可以一直嵌套
2、元素1 和元素2 之间用空格隔开
3、元素1 和元素2 是任意的基础选择器，可以是类选择器，id选择器，标签选择器

  <ul>
        <li>这是ul里的第1个li</li>
        <li>这是ul里的第2个li</li>
        <li>这是ul里的第3个li</li>
        <li>这是ul里的第4个li</li>
        <li>这是ul里的第5个li</li>
        <li>这是ul里的第6个li</li>
        <li>这是ul里的第7个li</li>
        <li>这是ul里的第8个li</li>
        <li>这是ul里的第9个li</li>
        <li>这是ul里的第10个li</li>
    </ul>
   <ol>
        <li>这是ol里面的li标签</li>
        <li>这是ol里面的li标签</li>
        <li>这是ol里面的li标签</li>
        <li>这是ol里面的li标签</li>
        <li>这是ol里面的li标签</li>
        <li>这是ol里面的li标签</li>
        <li>这是ol里面的li标签</li>
        <li>这是ol里面的li标签</li>
        <li>这是ol里面的li标签</li>
        <li>这是ol里面的li标签</li>
    </ol>

一、
/* 需求：想将ul里面的li的字体颜色改成红色 /
/ 下面的代码不使用选择器，有什么缺点 */

li {
            color: red;
        }

使用标签选择器而不使用后代选择器的效果：
/* 总结： 在不使用后代选择器时，我们需要创建10个类名，且代码里还有ol里面的li，如果用标签选择器这会将全部li的字体设置为红色，这样代码量较大，代码不美观，不易阅读*/

二、
/* 此时，下面的代码使用选择器，有什么优点*/

 ul li {
            color: red;
        }

使用标签选择器的效果：

/* 总结：使用后代选择器，如需要将ul里面的全部li字体颜色设置为红色，只需要编写一行代码，代码量少，代码美观，易阅读 */

三、
接下来对后代选择器进行嵌套使用：
需求：对div中的p标签里面的a标签进行字体大小设置为30px，字体颜色为紫色，去掉下划线，且将div标签添加类选择器。

<div class="one">
        <p><a href="">这是p标签里面的a标签</a></p>
    </div>

/* 接下来对后代选择器进行嵌套使用 */
        .one p a {
            color: purple;
            font-size: 30px;
            text-decoration: none;
        }

对后代选择器进行嵌套使用的效果：

总结，在书写代码时使用后代选择器需要注意的地方：
格式：元素1 元素2 { 样式内容}
1、后代选择器中外层是父级，内层是子级，子级可以一直嵌套。
2、元素1 和元素2 之间用空格隔开。
3、元素1 和元素2 是任意的基础选择器，可以是类选择器，id选择器，标签选择器。
4、后代选择器是选择元素1中所有的元素2。