CSS中关于!important的使用方法总结-tutorial css-php.cn

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

黄舟

Lepaskan： 2017-07-27 11:30:02

asal

2469 orang telah melayarinya

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

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

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

例如下面这个样式

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

}

Salin selepas log masuk

如果是在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;
}

Salin selepas log masuk

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

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

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

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

}

Salin selepas log masuk

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

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

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

Salin selepas log masuk

注意，一定要是同名的样式，也就是样式名都叫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>

Salin selepas log masuk

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

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

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

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