第一代不是第一个，只要不是嵌套在第一代后代里的，都属于同一级后代。

“胆小如鼠”和“老师”都有span标签，.first>span{color:red;}就会显示红色字体

子选器

子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。

.food>li{border:1px solid red;}

这行代码会使class名为food下的子元素li加入红色实线边框。

包含(后代)选择器

包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。

.first  span{color:red;}

请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

总结：>作用于元素的第一代后代，空格作用于元素的所有后代。

你在其中一个span里边，找一个字或者2个字，在加上一个span，这个span用>就不会变色。这样理解直接后代就容易了，用 空格 一样全部红

你理解错误了，.first>span作用于元素的第一代后代，.first span作用于元素的所有后代。这里的.first>span只作用于“儿子”不作用于“孙子”，代码中“<span>胆小如鼠</span>”和“<span>老师</span>”属于同辈的兄弟关系，所以都会变红，只有当出现“<span>胆小<span>如鼠</span></span>”时，才会只有前面的“胆小”变红。

.first>span ：表示class为first下第一代span，"胆小如鼠"和"老师"都是第一代span，所以都是红色：

.first>span ：表示class为first下所有span，所以都是红色

目前这两种效果是一样的，因为两者都是p的直接子代。