水果，蔬菜均为名为food这个class的第一代子元素，所以代码作用会分别给水果和蔬菜各加一个边框。

在此页代码中，第一代子元素被设置为<li></li>，内部的元素称为二代子元素，因此不能被执行样式，第二段落的<li>标签默认为同级别元素。可以理解为类似标题一的样式和标题一的样式是一样的。我是不是说的太乱了？

<ul class="food">                                /*        1代目    */

    <li>水果                                             /*         2代目   */

        <ul>                                               /*       3代目   */

        <li>香蕉</li>                                 /*         3代目的子代，以下类推   */

            <li>苹果</li>

            <li>梨</li>

        </ul>

    </li>

    <li>蔬菜                                       /*        与“水果”同级的2代目   */

    <ul>                                             /*         3代目   */

        <li>白菜</li>                         /*         3代目的子代   */

            <li>油菜</li>

            <li>卷心菜</li>

        </ul>

    </li>

</ul>

我也是初学，应该是这个意思，不对的话请指正谢谢

<li>水果</li>与<li>蔬菜</li>是平行关系，他们同为food的直接子节点，也就是同为food的第一代子元素，互为兄弟节点

只用于选择指定标签元素的第一代子元素

两个都是第一代 香蕉苹果这些是第二代