前端教程
当前位置:主页 > 新闻资讯 > 前端教程 >
CSS中优先级代码!important用法
发布日期:2019-11-08 阅读次数: 字体大小:

本篇文章将给大家分享一下使用CSS的!important如何改变优先级,通常,CSS可以根据上面的顺序来使用CSS样式,CSS有很多优先顺序的决定方法,但是优先级最高的是我们本篇文章要说的!important。

语法和描述:

!important为开发者提供了一个增加样式权重的方法。应当注意的是!important是对整条样式的声明,包括这个样式的属性和属性值。这里有个简单的代码示例可以清晰地说明!important是如何应用于原本的样式中的:

#example {

  font-size: 14px !important;

}

#container #example {

  font-size: 10px;

}、


在上面的代码示例中,由于使用了!important,id为“example”的元素字号将被设置为14px。
 

如果不使用!important,第二个样式声明的代码块很自然地比第一个的权重要大,原因有二:在样式表中第二个代码块要比第一个出现的晚(即,它位列第二);第二个代码块有更大的权重(是由两个id,#container #example组合而成,而不是只有一个id,#example。但是因为第一个代码块里面包含了!important,所以对于字号设置来说它有更大的权重。

关于!important应该注意的一些地方:

当!important第一次在CSS1中被介绍时是这样规定的,即一个由开发者声明的!important样式要比一个由用户声明的!important样式获得更大的权重。为了提高访问性,在CSS2 中它被颠倒了过来。

如果!important被用于一个简写的样式属性,那么这条简写的样式属性所代表的子属性都会被作用上!important。

关键字!important必须放在一行样式的末尾并且要放在该行分号前,否则就没有效果。 (不过分号前的空格不会影响它)

如果因为一些特殊原因,你不得不在一个代码块中声明两个同样的属性,那么请把!important加在第一个属性后面,因为这样做会让所有浏览器中第一个属性的权重更大,而IE6除外(这是一个只有IE6才有的hack,但是不会影响你的CSS)

在IE6和IE7中如果你使用不同的单词替代!important(像!hotdog),这条CSS样式依然会获得更大的权重,但是其他浏览器却会忽略它。

注意: 

1、IE6及更早浏览器下,!important在同一条规则集内不生效。 

2、如果!important被用于一个简写的样式属性,那么这条简写的样式属性所代表的子属性都会被作用上!important。 

3、关键字!important必须放在一行样式的末尾并且要放在该行分号前,否则就没有效果。

下次再说 咨询客服