CSS中箭头 > 的作用

在CSS中，有时会想根据某一个标签去寻找其下方的标签

通常情况下比如想找到一个div下的所有span标签，为其添加样式

我们会用 div span{/*想要添加的样式*/}

但如果是只想为div的子级span标签添加样式，而不修改该div的后代span标签

这就要用到箭头 > 了。

div >span是子选择，div span是后代选择

代码示例

css部分

<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    hr{
        border: 3px solid darkorange;
        margin: 20px 0px;
    }
    .div1 > .span1{
        color: blue;
        font-size: 30px;
        font-family: "楷体";
    }
    .div2 .span2{
        color: red;
        font-size: 30px;
        font-family: "宋体";
    }
</style>

html部分

<div class="div1">
    <span class="span1">
        div1下子级span标签
    </span>
    <div class="div1_1">
        <span class="span1">
            div1_1下的span标签
        </span>
    </div>
</div>
<hr />
<div class="div2">
    <span class="span2">
        div2下子级span标签
    </span>
    <div class="div2_2">
        <span class="span2">
            div2_2下的span标签
        </span>
    </div>
</div>

显示结果如下图：