LMLPHP后院

HTML渲染效果与CSS代码前后位置的关系技术

maybe yes 发表于 2016-08-01 17:29

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 属性也不会被覆盖。

相关文章
2022-01-21 18:54:56 1642762496 0.028406