《HTML教程》-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样式表优先级实例<linkrel="stylesheet"type="text/css"href="../css/Listing2-11.css"/><styletype="text/css"> div{ background:green; }</style><divstyle="background:blue;"></div>代码说明如下图：在浏览器中打开Listing2-11.html，效果如下：对照清单2-11中的代码和运行效果，可以得到如下结论：（1）外部样式表定义div的背景为红色，内部样式表定义div的颜色为绿色，而行内样式表定义div的背景为蓝色，最终div显示的背景颜色为蓝色，说明行内样式表的优先级最高，显示它定义的背景样式。（2）外部样式表定义了div的宽度和高