伪类选择器

<style>
    /* 任意父元素中的第一个 div 元素 */
    div:first-child {
        display: inline;
        background: linear-gradient(45deg, #3FB2FF, #A91EB5);
        -webkit-background-clip: text;
        -webkit-text-fill-color: rgba(0,0,0,0);
    }

    /* 第一个选择了每个<div>元素的第一个子元素 */
    div :first-child {
        background: #3FB2FF;
        -webkit-text-fill-color: #fff;
    }
</style>
<div>这是 body 元素的第一个子元素 div</div>
<ul>
    <li>
        <div>这是 li 元素的第一个子元素 div</div>
    </li>
    <li>
        <p>li 元素的第一个子元素 p</p>
        <div>li 元素的第二个子元素 div <span>该 div 元素的第一个 span</span> <span>该div元素的第二个 span</span></div>
    </li>
</ul>