《《WEB前端设计》子元素选择器ppt课件.pptx》由会员分享，可在线阅读，更多相关《《WEB前端设计》子元素选择器ppt课件.pptx（8页珍藏版）》请在三一办公上搜索。
1、子元素选择器,教学目标,Teaching Goal,了解子元素选择器的写法,会使用子元素选择器布局页面,教学内容,Teaching Content,延迟符,子元素选择器,Child selectors,使用后代选择器：h1 strong color:red;,上面这个规则会把作为 h1 元素后代的 strong 元素的文本变为 红色。而且第二个h1元素后代strong也会变成红色，这不是我们要实现的。,如果要对下面代码，如果要将第一个h1里strong元素中的字设置为红色：,我超级 喜欢 网页设计.我不是很 喜欢 网页设计.,通常为了解决这个问题，我们可能会更改元素名称，或者给元素加上类来进行
2、控制，但是也有更简单的方式。,h1 strong color:red;我超级 喜欢 网页设计.我不是很 喜欢 网页设计.,这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响。,如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。：,子元素选择器,Child selectors,语法解释,子选择器使用了大于号（子结合符）。子结合符两边可以有空白符，这是可选的。,子元素选择器（Child selectors）只能选择作为某元素子元素的元素。,h1 strong,Child selectors,h1 strong,h1 strong,h1strong,pany td p,结合后代选择器和子选择器。请看下面的例子：,上面的选择器会选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性。,子元素选择器,Child selectors,延迟符,教学小结,Teaching Summary,本讲围绕后代选择器，着重分析了其语法解释和使用规则，为后代选择器的使用奠定基础。,
