关于子选择器和包含选择器的问题

在下面的代码中

.first>food {

border:1px solid red}

<ul class="food">

    <li>水果

        <ul>

        <li>香蕉</li>

            <li>苹果</li>

            <li>梨</li>

        </ul>

    </li>

    <li>蔬菜

    <ul>

        <li>白菜</li>

            <li>油菜</li>

            <li>卷心菜</li>

        </ul>

    </li>

</ul>

如果子选择器只是用于第一个标签的第一代元素. 那么ul标签中的蔬菜li元素应该是孙子辈的？

为什么也同样会设置CSS样式呢？