首页 百科知识 样式表,规则的优先级

样式表,规则的优先级

时间:2022-10-19 百科知识 版权反馈
【摘要】:对于样式,存在两个或者两个以上的规则定义同一个元素,可是一个元素只能应用一种样式,这就存在不同规则的冲突。首先是样式表的优先级,即采用谁制定的样式。CSS规定,它们的优先级分别为:作者的样式表,用户的样式表,浏览器或者用户代理使用的默认样式表。层叠的优先级如下:解决了第一个问题后,CSS优先级面临第二个问题,选择符的优先级,即同一个样式表中选择符发生冲突如何处理。

3.2.3 样式表,规则的优先级——层叠机制

对于样式,存在两个或者两个以上的规则定义同一个元素,可是一个元素只能应用一种样式,这就存在不同规则的冲突。CSS通过“层叠”的过程来处理这种冲突。对于优先级有了清晰的认识后,我们可以对某些元素脱离一般的规则而采用特殊规则,达到我们所想要的效果。

对于优先级问题,有两个要解决的问题,样式表的优先级和选择符的优先级。首先是样式表的优先级,即采用谁制定的样式。因为,HTML文档的作者,查看HTML文档的用户,浏览器都有可能指定不同的样式表。CSS规定,它们的优先级分别为:作者的样式表,用户的样式表,浏览器或者用户代理使用的默认样式表。但是可以使用!important来提高优先级。层叠的优先级如下:

img103

解决了第一个问题后,CSS优先级面临第二个问题,选择符的优先级,即同一个样式表中选择符发生冲突如何处理。我们可以计算每个选择符的优先级来处理这个问题。

任何一个CSS规则由若干选择符组合而成,它们的优先级划分为4个等级,a,b,c,d:

1.如果样式是行内样式,则a=1;

2. b=ID选择符的个数;

3. c=类选择符,伪类选择符和属性选择符的数量;

4. d=元素选择符的数量。

将每个规则最终的优先级定义为a×1000+ b×100+ c×10+ d。

如果计算的值相同,则后定义的优先级高。比如:

img104

最后两行我们可以看出,优先级相同,而且规则是针对同一元素,所以后定义的优先,即后面的定义会覆盖前面的定义。这也是为什么我们前面讲述链接伪类时要规定定义的顺序为L(o)V(e)H(a)A(e)。否则,所定义的悬停或者激活的效果在鼠标悬停或激活的情况发生时就会失效。

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈