php语句html前后位置,HTML渲染效果与CSS代码前后位置的关系

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值