《WEB前端设计》子元素选择器

子元素选择器1教学目标TeachingGoal•了解子元素选择器的写法•会使用子元素选择器布局页面2教学内容TeachingContent延迟符子元素选择器Childselectors使用后代选择器：h1strong{color:red;}•上面这个规则会把作为h1元素后代的strong元素的文本变为红色。而且第二个h1元素后代strong也会变成红色，这不是我们要实现的。如果要对下面代码，如果要将第一个h1里strong元素中的字设置为红色：bodyh1我strong超级/strongstrong喜欢/strong网页设计./h1h1我em不是很strong喜欢/strong/em网页设计./h1/body•通常为了解决这个问题，我们可能会更改元素名称，或者给元素加上类来进行控制，但是也有更简单的方式。!DOCTYPEHTMLhtmlheadstyletype=text/cssh1strong{color:red;}/style/headbodyh1我strong超级/strongstrong喜欢/strong网页设计./h1h1我em不是很strong喜欢/strong/em网页设计./h1/body/html这个规则会把第一个h1下面的两个strong元素变为红色，但是第二个h1中的strong不受影响。•如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Childselector）。：子元素选择器Childselectors语法解释•子选择器使用了大于号（子结合符）。•子结合符两边可以有空白符，这是可选的。子元素选择器（Childselectors）只能选择作为某元素子元素的元素。h1strongChildselectorsh1strongh1strongh1strongtable.companytdp结合后代选择器和子选择器。请看下面的例子：上面的选择器会选择作为td元素子元素的所有p元素，这个td元素本身从table元素继承，该table元素有一个包含company的class属性。子元素选择器Childselectors延迟符3教学小结TeachingSummary本讲围绕后代选择器，着重分析了其语法解释和使用规则，为后代选择器的使用奠定基础。