CSS 中某些样式的位置会使得 HTML 的渲染产生不同的效果的,特别是位置前后的不同或者载入顺序的不同。本篇文章讨论的是 CSS 在 HTML 上下文的位置问题,并不讨论 CSS 有多少种写法。这里的 CSS 主要是指 CSS 都是放在
最近碰到的一个小小的不同的网页渲染效果,是我以前没有太注意的。HTML 中 标签是有很多状态的,一般我只对 hover 状态另加描述。这次的问题是:同样的写法,页面的有些地方的 标签没有继承 hover 效果,有些地方的 标签时继承了 hover 效果的。经过排查,发现页面主体内容的 标签会继承 hover 效果是因为主体内容 标签的颜色样式声明的位置在最前面,接着再有公共的 CSS 声明了网站的 a:hover 样式,底部部分的 标签没有继承 hover 样式是因为 标签样式中的颜色的声明的 CSS 出现在最后面的位置。如下示例:
// 主体内容,位置在最前面
.mid a{
color:#195A94;
}
// 公共部分样式
a{
text-decoration:none;
color:#000;
}
a:hover{
color:#ff6f3d;
}
// 脚部样式,位置在最后面
.foot a{
color:#4691b9;
}
出现这样的分布,跟架构也是分不开的。个人开发更喜欢轻架构自由和高性能。并没有太多的时间去开发出类似于主流的 @section 的模板装载嵌套引擎,模板的排列都是包含关系,所以是顺序的,并不会出现局部替换的效果。为了保证样式尽量都在 header 里面,所以在嵌套头部公共部分的时候也就提前先定义了部分样式表。上面的代码中主体内容的 的颜色最先定义,接着 CSS 顺序执行,到公共部分的 CSS 定义的 标签的颜色的 hover 属性就把主体内容 标签原有的 hover 效果覆盖了,出现了类似继承的效果;而脚部的 标签的颜色定义直接覆盖了所有的属性,包括 hover 效果,所有它没有 hover 效果。
hover 属性的优先级不同的浏览器表现也有差异,IE6 的渲染就和上面的规则不同。如果在 class 的前面有标签的限定,如 div.mid a,hover 属性也不会被覆盖。