说明

与后代选择器类似，区别是：子选择器只能逐级匹配，不能跳过儿子，直接匹配孙子

选择器1 > 选择器2 > 选择器3{
    样式属性1:值1;
    样式属性2:值2;
}

每个选择器之间用 > 进行分割

注意：应避免出现多层

可以通过父标签选中子标签，可以不用给子标签设置 id选择器、类选择器

案例

在不改变下面HTML代码的情况下，让下面的 一、二、三 显示成红色：

<ul class="c1">
    <li>李雷第<span>一</span>名</li>
    <li>韩梅梅第<span>二</span>名</li>
    <li>lucy第<span>三</span>名</li>
</ul>

样式：

<style type="text/css">
    /* 每一级都要写，不能跳过儿子，直接匹配孙子 */
    .c1 > li > span{
        color:red;
    }
</style>

选择器 .c1 > li > span 每一级都要写，不能跳过儿子，直接匹配孙子