2样式冲突CSS选择器的战争.docVIP

样式冲突：CSS选择器的战争 摘要：使用CSS语言美化网页的过程中，网页中的很多元素都会被赋予各种各样的样式。常常遇到的问题是：某个元素没有按照预期的样式呈现相应的效果。这种情况的出现源于样式表中各种样式的冲突。样式冲突究竟是怎样产生的？它们之间的战争是怎样进行的？最终谁会胜出？这一系列问题的提出和解决能更深入地理解和使用CSS语言，让网页随心所欲，想变就变。 关键字：CSS，选择器，样式冲突，权重值 在使用CSS语言对网页进行美化的过程中，网页中相当多的元素都会被多次定位。在很多情况下，那些希望被修饰的元素，并没有按照设计人员的想法展现相应的样式。发生这种情况通常是由于被指定的元素被赋予了同样属性，不同属性值的样式，从而引起了样式冲突。 样式冲突的起因及各种冲突类型 众所周知，CSS语言使用层叠来管理样式表，而CSS语言的特性——继承也从中起了相当重要的作用。当某一元素从多个祖先标签处继承了同一属性的样式，或者多个选择器指向同一元素时，令人苦恼的是究竟哪个样式会被浏览器采纳？这些结果又应该怎样提前判断？首先要了解的是：样式冲突是怎样产生的？通常有两种情况会发生样式冲突：从多个祖先处继承了同一种属性的时候；以及当一个或多个样式应用于同一个元素的时候[1]。前一种情况下，从多个祖先处继承的同一属性会因属性值发生冲突，最终获胜的未必是设计者所希望的；后一种情况更为复杂，它大致包含以下几种情况： 同一元素被标签选择器和类选择器同时定位。当有一个 h2 class ”leadHeadline” 标签时，它有可能同时被样式表中的标签选择器h2 … 和类选择器.leadHeadline … 定位。 群选择器使用不当导致冲突。参照上面的例子，如果样式表中有一个群选择器，其中出现了.leadHeadline的名字，这种情况下， h2 class ”leadHeadline” 标签就非常容易出现样式冲突了。 多个样式表中相同的样式名字。当对多个网页进行编辑时，会使用多个样式表针对不同的网页元素进行编辑，这些样式表中会出现名称相同的样式。 派生选择器的使用不当。派生选择器是CSS语言中使用得非常频繁的选择器，但是派生选择器的定位往往会出现“殊途同归”的情况，出现了这种情况，冲突也就出现了。 网页编辑的过程中，样式冲突的出现是十分频繁和正常的。打开网页进行检查时，这些冲突也会一目了然（即那些没有按照设计者的意图展现的样式）。了解了样式冲突的来由，我们进一步希望知道的是：样式冲突中，最后胜出的样式是被哪些因素所决定的？ 样式胜出的决定因素 事实上，已经有有效的手段去判断样式冲突产生后，究竟那些样式会胜出——这就是权重值的计算。在学习这种方法之前，先来了解一下样式冲突产生后，决定那种样式胜出首先要遵循两个原则（权重值的计算也要遵循这两个原则）： 最近原则 当某个标签没有自己专属的样式时，它的样式取决于它的祖先标签。例如： 在样式表中有body color:%^ 和div color:*^ ，最终 标签会采取div color:*^ 的样式。原因就在于， 标签比 标签距离 标签更近。这个例子只举了最简单的标签选择器，如果涉及其他选择器，最近原则依然适用。 最直接原则 当某一元素有最直接的样式，那么，这个样式将直接战胜所有继承来的样式。上例中，如果样式表中有p color:#$% ，则此样式胜出。 上述两个原则简单易懂，但是通常的样式冲突更为复杂。试考虑：有一个 p class ”page” id ”ex” 标签，样式表中有：p … .page … #ex … 三个样式，且这三个样式都定义了字体，颜色，行距等等，浏览器最终会执行那个样式？同样作用于某一个标签的直接样式最终谁会胜出？为什么？ 通过大量的实践，这个问题已经可以解答。现引入一个概念：权重值。再对每一中选择器赋予具体的值： 一个标签选择器：1分 一个类选择器：10分 一个ID选择器：100分 一个内建样式：1000分 这个评分系统对所有的样式有效，且可以叠加，最终权重值大的胜出。于是，上例的答案就呼之欲出了：ID选择器（100分） 类选择器（10分） 标签选择器（1分），浏览器会执行ID选择器的样式。尽管如此仍然会出现一个尴尬的问题：两个样式的权重值相同。当出现这种情况时，最后一个样式会胜出。 有了这样一个评分机制，就可以很顺利地避免了各类样式冲突，让网页按照设计的要求去进行变换。 参考文献： [1]David Sawyer McFarland. 《CSS实战手册》［M］.北京：电子工业出版社，2010：71-76 [2]Michael Bowers等.《HTML5与CSS3设计模式》[M] .北京：人民邮电出版社，2013:70、71 作者简介：张一驰（19-10），，汉族，，，，主要从事