《WEB前端设计》后代选择器

后代选择器1教学目标TeachingGoal•了解后代选择器的写法•会使用后代选择器在实际中的使用2教学内容TeachingContent延迟符后代选择器descendantselector使用类或者ID选择器来实现对特定的元素应用样式而不影响其他的同类元素。上面这个规则会把作为p元素后代的em元素的文本变为红色。其他em文本（如段落或块引用中的em）则不会被这个规则选中。htmlheadstyletype=text/cssem.red{color:red;}/style/headbodyh1Thisisaemimportant/emheading/h1pThisisaemclass=“red”important/emparagraph./p/body/html•如果您希望只对p元素中的em元素应用样式，可以这样写：后代选择器descendantselectorhtmlheadstyletype=text/cssem.red{color:red;}/style/headbodyh1Thisisaemimportant/emheading/h1pThisisaemclass=“red”important/emparagraph./ppThisisaemclass=“red”important/emparagraph./ppThisisaemclass=“red”important/emparagraph./p/body/html•如果一个文档中有多个P和em结构，类选择器的方法就显得很麻烦后代选择器descendantselector我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用上面这个规则可以同样达到效果，但与类选择器方式来比较，显然，后代选择器的效率更高。htmlheadstyletype=text/csspem{color:red;}/style/headbodyh1Thisisaemimportant/emheading/h1pThisisaemimportant/emparagraph./p/body/html•为了解决这个问题，如果您希望只对P元素中的em元素应用样式，也可以这样写：语法解释•后代选择器（descendantselector）又称为包含选择器。•后代选择器可以选择作为某元素后代的元素。在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器pem{color:red;}空格可以解释为“...在...找到”、“...作为...的一部分”、“...作为...的后代”descendantselectorpem选择器可以解释为“作为p元素后代的任何em元素”,或者“包含于p元素的所有em元素会应用括号里面的样式”。后代选择器应用•例如，如果写作ulem，这个语法就会选择从ul元素继承的所有em元素，而不论em的嵌套层次多深。因此，ulem将会选择以下标记中的所有em元素：ulem{color:red;font-weight:bold;}有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。descendantselectorulliListitem1olliListitem1-1/liliListitem1-2/liliListitem1-3olliListitem1-3-1/liliListitemem1-3-2/em/liliListitem1-3-3/li/ol/liliListitem1-4/li/ol/liliListitem2/liliListitem3/li/ul延迟符3教学小结TeachingSummary本讲围绕后代选择器，着重分析了其语法解释和使用规则，为后代选择器的使用奠定基础。