改变权重值灵活处理样式冲突
2013-04-29张一驰
摘 要：样式冲突是常见的一种需要处理网页问题！了解样式冲突的原理，使用权重值去计算那种样式冲突会胜出，是常用的解决这类问题的手段。样式冲突是把双刃剑，灵活利用权重值，改变权重值，可以让网页始终在设计者的控制下。利用权重值让想要看到的的样式胜出，清除浏览器，使浏览器的默认样式不在打扰设计者的思路，是做好网页很关键的一步。
关键词：样式冲突 权重值 CSSreset
一、权重值的概念和计算方法
样式冲突是使用CSS语言修饰网页时经常出现的一种状况。样式冲突比较复杂，但是它有遵循的原则。通常使用权重值去计算在样式冲突中，那种样式会最终胜出。权重值的给出依赖于选择器的类型：标签选择器的值为1分；类选择器的值为10分；ID选择器的值为100分；内建样式的值为1000分（伪元素被浏览器当做标签选择器处理，值为1分；伪类被当做类选择器处理，值为10分）。这些值是可以叠加的，例如：
p .email {color ： red；}
这个选择器的值为11分：其中标签选择器1分，类选择器10分。
当出现了样式冲突时，通过权重值得叠加计算，然后比较大小，可以获知那种样式会被浏览器最终采用。但也有这样一种情况：两个选择器的权重值相同。例如有这样一段HTML语言：
在CSS样式表中有这样两个样式：
p .email { color ： red； } ①
.byline a { color ： blue； } ②
很明显，这两个样式都对标签做出了规定：一个要求字体为红色；一个要求为蓝色。这样的样式冲突使用权重值去计算：
① 1（标签选择器）+10（类选择器）=11
② 1（类选择器）+10（标签选择器）=11
两个选择器的权重值相同。这种情况下，浏览器遵循：“权重值相同时最后一个样式胜出”[1]的原则。
二、改变权重值
当两个样式生冲突时，通过权重值的计算，发现所需要展现的样式并没有胜出。令人感到麻烦的是，这也许不是两个简单的标签选择器、类选择器或者ID选择器，而是较为复杂的派生选择器。比如下例：
明显地可以看出，类选择器“.intro”才是设计者对于
标签所希望展现的样式。但是通过计算权重值，“#sidebar p”的值为101分，而“.intro”的值为10分，也就是说，浏览器最终会执行“#sidebar p”的样式，而并非“.intro”的样式。那么，怎样才能达到设计者的要求呢？很简单，对样式表修改如下：
可以看到，只是简单地把类选择器变成了派生选择器，但是权重值却由10分（“.intro”）变成了110分（“#sidebar .intro”）。最终，设计者所需要的样式就胜出了。
CSS语言提供了相当多的选择器供设计者使用。诸多地选择器中，派生选择器和高级选择器的定位方法相当地灵活和准确，在不发生样式冲突时，往往针对一个元素的定位可以有几种方式，但它们效果相同。这让我们产生了错觉，会习惯于使用最简单的定位方式（因为简单明了，所以单词相应的也少）。例如：
针对上面这段HTML语言中的无序列表里的标签，以下都是有效的选择器：
li a
body li a
html body li a
html body lu li a
尽管没有使用类选择器或ID选择器等太复杂地定位方式，但是依然可以看出，都是对无序列表中的标签做出定位，它们的权重值却绝不相同。利用派生选择器等的相对定位方式，可以灵活地改变权重值从而达到相应的效果。
参考文献：
[1]David Sawyer McFarland. 《CSS实战手册》[M].北京：电子工业出版社，2010：45、46、75-80
[2]Michael Bowers等.《HTML5与CSS3设计模式》[M] .北京：人民邮电出版社，2013： 12-15
作者简介：张一驰（1978.10-），男，汉族，内蒙古赤峰市人，助教，内蒙古交通职业技术学院，主要从事计算机网络建设方面的研究。
