LMLPHP后院

CSS 中某些样式的位置会使得 HTML 的渲染产生不同的效果的，特别是位置前后的不同或者载入顺序的不同。本篇文章讨论的是 CSS 在 HTML 上下文的位置问题，并不讨论 CSS 有多少种写法。这里的 CSS 主要是指 CSS 都是放在 <style> 标签中的情况，一般的网站也很少直接写 style 属性的。

最近碰到的一个小小的不同的网页渲染效果，是我以前没有太注意的。HTML 中 <a> 标签是有很多状态的，一般我只对 hover 状态另加描述。这次的问题是：同样的写法，页面的有些地方的 <a> 标签没有继承 hover 效果，有些地方的 <a> 标签时继承了 hover 效果的。经过排查，发现页面主体内容的 <a> 标签会继承 hover 效果是因为主体内容 <a> 标签的颜色样式声明的位置在最前面，接着再有公共的 CSS 声明了网站的 a:hover 样式，底部部分的 <a> 标签没有继承 hover 样式是因为 <a> 标签样式中的颜色的声明的 CSS 出现在最后面的位置。如下示例：

<style>
// 主体内容，位置在最前面
.mid a{
	color:#195A94;
}

// 公共部分样式
a{
	text-decoration:none;
	color:#000;
}
a:hover{
	color:#ff6f3d;
}

// 脚部样式，位置在最后面
.foot a{
	color:#4691b9;
}
</style>

出现这样的分布，跟架构也是分不开的。个人开发更喜欢轻架构自由和高性能。并没有太多的时间去开发出类似于主流的 @section 的模板装载嵌套引擎，模板的排列都是包含关系，所以是顺序的，并不会出现局部替换的效果。为了保证样式尽量都在 header 里面，所以在嵌套头部公共部分的时候也就提前先定义了部分样式表。上面的代码中主体内容的 <a> 的颜色最先定义，接着 CSS 顺序执行，到公共部分的 CSS 定义的 <a> 标签的颜色的 hover 属性就把主体内容 <a> 标签原有的 hover 效果覆盖了，出现了类似继承的效果；而脚部的 <a> 标签的颜色定义直接覆盖了所有的属性，包括 hover 效果，所有它没有 hover 效果。

hover 属性的优先级不同的浏览器表现也有差异，IE6 的渲染就和上面的规则不同。如果在 class 的前面有标签的限定，如 div.mid a，hover 属性也不会被覆盖。