.food li{

    border:1px solid red;

   list-style-position:inside;

}

就会包括点了。

<ul class="food">

    <li>水果

        <ul>

        <li>香蕉</li>

            <li>苹果</li>

            <li>梨</li>

        </ul>

    </li>

    <li>蔬菜

    <ul>

        <li>白菜</li>

            <li>油菜</li>

            <li>卷心菜</li>

        </ul>

    </li>

</ul>

水果和蔬菜都是food的子，但香蕉、苹果、梨不是，

香蕉、苹果和梨是水果的子，是food的后代。

li前面2点个不包含在Li里面的内容吧，你可以在Li 的父元素ul 的class中添加list-type:none;来去掉。子选择器，比如说ul li 就是ul这个元素里面的所有含有<li>标签的元素； 而ul>li就是，ul这个元素的第一级的子元素，这一级子元素如果内部还包含了第二级的li,那么第二级的Li就不会算在里面。