HTML+CSS基础课程之包含(后代)选择器

包含(后代)选择器

包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：

.first  span{color:red;}

这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。

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

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

ps:

标签选择器，标签名{}，作用于所有此标签。

类选择器， .class{}，在标签内定义class=""，属图形结构。

ID选择器，#ID{}, 在标签内定义id=""，有严格的一一对应关系。

子选择器， .span>li{}，作用于父元素span类下一层的li标签。

包含选择器，.span li{}，作用于父元素span下所有li标签。

通用选择器，*{}，匹配所有html的标签元素。