Rumah > Artikel > hujung hadapan web > CSS中关于!important的使用方法总结

CSS中关于!important的使用方法总结

黄舟asal: 2017-07-27 11:30:022460semak imbas

下面简要的给大家讲一下CSS 中一个比较重要的!important属性，从笔者的实践中总结了以下两点：

1、用于解决IE对某些CSS规范有偏差的情况.

比如在IE中的效果总是和其他的浏览器如firefox,opera等相差2px,导致页面布局有错位，这是因为IE对盒之间距离的解释的bug造成的，针对这种情况我们就可以利用!important来帮助解决。

例如下面这个样式

.myclass{
 margin-left:20px!important;
 margin-left:40px;

}

如果是在firefox,opera,chrome中，这些浏览器支持!important属性，也就是说他们会默认让margin-left:20px!important; 这条语句生效，下面的不带!important声明的样式将不会覆盖它，换句话说就是他的级别最高，下面的人都不能取代我！

但是，如果换作是IE浏览器会是什么情况呢，因为IE不支持!important ，就是说IE不认识这句话是什么意思，于是傻瓜IE就把这条给略过了，下面那条他可是认识的，于是margin-left:40px;
就生效了。

说到这，需要有一点注意：

并不说IE真的不认识!important,如果你单单想用!important去区别IE和其他浏览器那你就错了，比如：

.myclass{
backgroud-color:black !important;
}

我们异想天开的认为，这条样式IE不认，我们可以让它在其他浏览器上定制显示。到底是不是这样呢？真的不是！ IE也认了。

说到这你是不是有点糊涂了，到底IE认不认啊？？？

答案很简单，只有当同时出现两个同名的样式时，才可以这样用，就像下面这样的.

.myclass{
 margin-left:20px!important;
 margin-left:40px;

}

2、如果有定义了一个样式A，比如font-size,你不打算让以后也叫样式A的覆盖掉这个font-size,也可以用 !important . 而如果新样式也用了!important 则还是会强制覆盖掉

.A{
 font-size:12px !important;
}
.A{
 font-size:14px;   //不会生效
}

.A{
 font-size:14px !important; //生效
}

注意，一定要是同名的样式，也就是样式名都叫A的样式才行，如果是父代与子代的情况就不管用了，比如说：

<html>
<head>
<style>
.father{
font-size:12px !important;
}
.child{
font-size:14px;
}
</style>
<body>
<div class="father">
 <div class="child">I am child </div>
</div>
</body>
</html>

这种情况下，child的font-size就是14px，不受 father影响。

Atas ialah kandungan terperinci CSS中关于!important的使用方法总结. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：CSS：!important使用代码分享Artikel seterusnya：CSS中如何使用!important声明强制优先的具体介绍

Artikel berkaitan

Lihat lagi