1.2 子代选择器

子代选择器

选中父元素中指定子元素

语法

父类 > 子类 
选择器1  > 选择器2 ....   {属性:属性值;属性:属性值.....;}

栗子

    <style>

      /* 子代选择器，父类标签只会选择子代标签 */
      div > div {

        font-size: 40px;

        color: red;
      }
      
       /*
       div.box > span {
        color: blue
       }
       */

    </style>

    <!--这里选中了  -->

    <div class="div1">

      <div class="div2">  

        <!-- 只要是div下的div下的所有元素都会被css化 -->

       <p>我是p标签,div1的后代,是div2的子代，也是后代</p>

      </div>

      <div>789</div>

    </div>

<!-- 这里并没有选中 -->

    <div class="div3">

      <p>我是p标签,我是div3的子代，也是后代</p>

    </div>

注意

1. 子代只包括儿子
2. 子代选择器中，选择器与选择器之间通过 > 隔开

子代和后代的区别

• 选择对象不同
• 格式不同