为什么练习中的答案红色边框没有包含水果和蔬菜的前面两个点,顺便在解释一下子选择器吧,初学,还是有点不明白
.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就不会算在里面。