ajax实用技术教学课件作者程继洪肖川李海斌编著第2章css3基础2.5.pptx

2.5 样式的继承、冲突与叠加 如果在网页中一个元素没有指定样式，那它会显示什么样式呢？ 答案是它将使用父元素（即包含它的元素）的样式，这种性质称为样式继承。 如果同一网页对应多个选择器，那么就会出现样式冲突和叠加的情况。 所谓样式冲突就是指对于同一CSS属性却设置了不同的值，如color属性在不同的选择器中，针对同一元素设置了不同的颜色。 所谓样式叠加就是指不同的选择器针对同一元素指定了不同的CSS属性，这些CSS属性共同决定元素的样式，即同一元素应用了多个样式。 对于样式叠加比较容易理解，就是同一元素应用多种样式。但对于样式冲突该怎么解决呢？元素到底该应用哪个选择器的样式呢？ 这是由样式表的优先级和“就近原则”决定的。 在2.1节中介绍了行内样式表、内部样式表和外部样式表，这三种样式表的优先级顺序是： 行内样式表内部样式表外部样式表。 也就是说，如果这三个样式表中规定的样式存在冲突，则先以行内样式表中定义的样式为准，如果没有定义行内样式表，则以内部样式表为准，依次类推。 “就近原则”就更容易理解了，哪个选择器离选择的元素越近，就优先采用哪个选择器的样式。其实样式表的优先级也符合“就近原则”， 此外，解决冲突还有一个原则，那就是“作用范围小者优先”。 意思是指，选择器的作用范围小的优于作用范围大的，也就是说如果两者发生冲突，则采用作用范围小的选择器定义的样式。 大家可以在清单2-10的样式表的最后，也谅是p:only-child选择器的后面添加如下的选择器定义： p { font-size: 12px; } 然后刷新网页，会看到段落中的文字“这个段落比较特殊！”并没有变成12px大小，依然是36px。 此时，虽然p标记选择器离p更近，但它的作用范围比p:only-child要大——p作用于所有的p元素，而p:only-child只作用于单独一个p元素的情况——所以不会应用“就近原则”，而使用“作用范围小者优先”的原则。 这个作为练习，请大家自行完成。 下面通过一个例子来说明样式冲突与叠加的问题。 实例代码如清单2-10所示，其实这段代码来自于清单2-7，你已经见识过冲突与叠加了。 代码说明如下图： 将清单2-10中的代码保存为html文件，在浏览器中打开，看到的效果如图2-4所示。 图2-4 清单2-10代码的运行效果 分析清单2-10的代码，对照图2-4中的运行效果可以得到如下结论。 ★ 所有选择器没有定义p段落的颜色属性，但其中的文字显示为红色，说明p段落继承了父元素div中的颜色定义。 ★ p:first-child伪类定义了第1个段落的样式为宽2px，虚线，颜色为红色的边框，div中的p段落只有一个，因此它也是第1个p段落，应该应用p:first-child定义的边框样式。 但它的边框样式却是绿色点线。说明它没有使用p:first-child定义的边框样式，而是使用了p:last-child伪类定义的边框样式，因为它即是第1个段落也是最后一个段落，而p:last-child伪类选择器离p段落“更近”，所以在样式冲突的情况下，应用了“更近”一些的p:last-child样式。 ★ p:nth-child(2n + 1)伪类选择器定义了奇数个段落的样式：背景为棕黄色（#fb4）。因为div中的段落只有一个，所以它也是奇数个段落，所以应用了背景为棕黄色这一样式，外加p:last-child定义的绿色点状边框的样式，这就是样式的叠加。 ★ 同样的道理，p:only-child定义了唯一p段落的样式为字体大小36px，从图2-4可以看出这个段落也应用了这一样式，这也是样式的叠加。 为了验证样式冲突的效果，让我们把离p段落“更近”的p:last-child选择器删除，观察一下显示效果，如下图所示。 可以看出，这里p段落应用了p:first-child定义的红色虚线的边框效果，因为现在已经没有选择器与p:first-child的样式产生冲突了。大家可以实验一下，实际观察一下，增加对样式冲突的理解。 对于样式冲突我们再举一个样式表优先级的例子，加深大家对样式冲突的理解。首先，我们定义一个Listing2-11.css文件，代码如下： div { width: 300px; height: 80px; background: red; } 再创建一个Listing2-11.html文件，代码如清单2-11所示。 清单2-11 样式表优先级实例 link rel=stylesheet type=text/css href=../css/Listing2-11.css / style type=text/css div { background: green; } /style div style=backgrou