《WEB前端设计》后代选择器ppt课件.pptx

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