六、人为定义CSS继承优先级
在制作网页的过程中,我们可能想要设置某个规则比其他的规则更重要,CSS中允许这样设置,它们被称为重要规则(importantrule)。这是根据其声明的方式和它们的自然属性来命名的。通过在一条规则的分号前插入!important这样一个短语来标记一条重要规则,比如说:
- P.apple{color:#red!important;background:white;}
颜色值#red被标记为!important,而背景色white未被标记,如果需要二条规则都是重要的话,那么每条规则都需要标上!important。
正确地放置!important的位置是很重要的,否则整条规则将为无效。!important总是放在规则声明的最后,在分号之前。
标记为!important的规则具有最高的权值,也就是说他没有具体的特性值,但是比其他的权值都要大。需要注意的是,虽然制作者定义的样式比用户定义的样式具有更高权值时,但!important规则恰恰相反:重要的用户定义规则要比制作者定义的样式具有更高权值,即使是标记为!important的重要规则也是如此。
看了这么多文字介绍后,我们来举个例子看一下:
样式定义:
- H1{color:gray!important;}
应用举例代码:
- <H1STYLEH1STYLE=”color:black;”>看这儿!</H1>
应用举例效果:
!important规则会覆盖内联STYLE属性的内容,所以结果文字是灰色的而不是黑色的。
还有最后一种需要考虑的情况:CSS继承值总是具有特性值0的特点,即使是从带有!important的规则继承的值也是如此,在匹配重要规则的元素之外,重要性也会随之消失,这点是需要我们特别注意的!
【编辑推荐】
- 探究CSS高级语法中选择器分组和CSS继承用法
- CSS样式实现快速定位bug的六大技巧
- CSS中link和@import的区别
- CSS2.0中page-break-after属性用法
- 技术分享 使用不同CSS样式兼容多种浏览器
样式定义:body{color:red;}
应用举例代码:<p>CSS的<strong>层叠和继承</strong>深入探讨</p>
应用举例效果:
这段代码的应用结果是:“CSS的层叠和继承深入探讨”这段话是红颜色的,“层叠和继承”由于应用了strong元素,所以是粗体。这很符合制作者的意图,也是为什么继承是CSS的一部分的原因。