CSS：
.first>span{color:red;
border:1px solid red;}
HTML：
<p class="first">三年级时，我还是一个<span>胆<span>小如</span>鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
主要纠结的是为什么<span>标签的第二代变红了但是<li>标签的第二代没有每个都加框吗？按我理解，“小如”是第一代<span>内的内容，所以字体颜色为第一代的红色；<li>第二代也是第一代<li>内的内容，因此它们同在第一代的红框内，而不是自身有红框。
下面两个例子都采用子选择器，样式都为红色字体，加边框。
<span>胆<span>小如</span>鼠</span>
从左向右我把标签计作1、2、3、4，
我个人认为1和4默认是一对，2和3默认是一对，所以第一代应该是1和4之间的内容，包括在里边的所有内容（尽管里边有第二代）都被设置了样式，显示结果为红色字体，边框圈4个字最外层，因为2和3是第二代，所以小如两个字外边不圈边框，至于小如两个字为什么变红而不是不变，我认为小如两个字是第一代和第二代共有部分，因为第一代对其进行了设置，所以它是红色。
回到课程中，
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
第一个<li>和最后</li>是第一代，包括在里边的所有内容（尽管里边有第二代），也同样被设置了样式。，结果显示如上面分析的那样，圈最外边大框，字体全部变红（因为字体是共有部分）。当使用后代选择器时，显示外框套内框，字体全红。
如果猜错的话，求大神更正。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>后代选择器</title>
<style type="text/css">
.first>span>span{color:red;}
.food>li>ul>li{
border:1px solid red;color:red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
}
</style>
</head>
<body>
<p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<!--下面是本小节任务代码-->
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
</body>
</html>
哥们你用我的代码试一下 你就全明白了 ，很简单的，说我也说不太清楚，我就直接放代码吧
按你的思路, 第一代第二代. 那第一代就是第二代的父元素,第二代是第一代的子元素,它们是父子关系,假如在这段话中其它地方出现span, 那么它和第一代就应该是兄弟关系. 父元素与子元素应该是包含关系,也就是说子元素有的,父元素也有. 那么第一代子元素中包含的内容应该是"胆小如鼠",第二代子元素中的是"小如". 兄弟关系最好的体现就是你可以在文本的其它地方加个span标签, 看看它会不会像这个嵌套一样变色.
你回复的评论说第二组加边框的明白...那它和第一组这个"胆小如鼠"有什么区别吗? 第二组不就是两个ul-li嵌套么? <li>水果</li>是第一代子元素,<li>香蕉苹果梨</li>是第二代.按你说的,边框应该只加在水果这两个字上就可以了啊,为什么它把香蕉苹果梨都圈起来了? 如果你觉得看第二组能看明白,你把格式设置换一下, 第二组用颜色, 你看看是不是所有的字都变成红色.
感觉你这个问题就是给自己刨了个坑儿,然后跳里出不来了.
第一：border:1px solid red;}这个代码是加上红色框框的，不是改字体颜色的，字体颜色是colr：red。
第二：<span></span>之间的内容都会被改变，不用在小如这里加上<span></span>
以为字体颜色在没有设置的情况下会继承父辈的字体颜色啊（a标签除外），所以“小如”也会变为红色
找最近的配对