這篇文章將為大家詳細(xì)講解有關(guān)css中!important的作用是什么，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

江海網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),江海網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為江海千余家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的江海做網(wǎng)站的公司定做！

{*rule !important}這個(gè)css規(guī)則當(dāng)今在網(wǎng)頁(yè)制作的時(shí)候的普及已經(jīng)非常流行了，以前我對(duì)它的理解就停留在‘瀏覽器是否識(shí)別階段’ 而沒(méi)有真正去研究過(guò)，可是現(xiàn)在發(fā)生了變化。眾所周知，!important這個(gè)規(guī)則對(duì)Ie6.0,Ie7.0和Firefox能寫(xiě)hack，現(xiàn)在就來(lái)講解這是什么原理：

*對(duì)于Ie系列瀏覽器都能夠識(shí)別， firefox 瀏覽器則不能識(shí)別;

!important只有Ie7.0和firefox可以識(shí)別，但是Ie6.0不能成功應(yīng)用.

(1)區(qū)別ie與firefox的hack為:border:2px solid #f00;*border:1px solid #f00;

(2)區(qū)別Ie6.0 與Ie7.0、firefox的hack為:border:1px solid #f00!important;border:2px solid #f00;

在(1)中，之所以把*放在后面是因?yàn)閒f不識(shí)別*而導(dǎo)致只對(duì)它設(shè)置了一次border;而ie 系列進(jìn)行了兩次border設(shè)置后，后一個(gè)屬性覆蓋了前一個(gè)屬性，故為一像素的邊框。

在(2)中，之所以把!important放在第一個(gè)border 設(shè)置，是因?yàn)樗堰@次border的優(yōu)先級(jí)提高了，即使后面在一次甚至在N次設(shè)置border 也無(wú)效，但是Ie6.0對(duì)這個(gè)規(guī)則不接受，而導(dǎo)致它應(yīng)用了第二次的border 設(shè)置，也就是第二次覆蓋了第一次的這一原理， 并不是它不識(shí)別!important;所以它的border為2 像素的紅框.

這是一個(gè)簡(jiǎn)單的應(yīng)用：

例一：

CSS

代碼如下:

#Box {
2 color:red !important;
3 color:blue;
4 }

HTML

1 <div id="Box"> 在不同的瀏覽器下，這行字的色應(yīng)該不同！</div>

這個(gè)例子應(yīng)該是大家經(jīng)常見(jiàn)到的important的用法了，在IE環(huán)境下，這行字是藍(lán)色，在firefox下，為紅色，其用法不再多說(shuō)了，看下一個(gè)例子。

例二：

CSS

代碼如下:

#Box div{
color:red;
}
.important_false{
color:blue;
}
.important_true{
color:blue !important;
}

HTML

代碼如下:

<div id="Box">
<div class="important_false">這一行末使用important</div>
<div class="important_true">這一行使用了important</div>
</div>

例二中，CSS代碼第一行設(shè)定了box里面所有div中字體色為紅色，第二行和第三行都用class重新定義了自身div的字體色為藍(lán)色，不同的是，第二行末使用important，而第三行使用了！

默認(rèn)情況下，class的優(yōu)先級(jí)小于id，所以，第二行中即使用class重定義了自身樣式，也無(wú)法生效，所以繼承父級(jí)屬性，這行字還是紅色！
但是，第三行中，用了important提升優(yōu)先級(jí)（或看成強(qiáng)制重定義），所以這里的css得以生效，這行字變?yōu)榱怂{(lán)色！從這個(gè)例子，得以證明，ie對(duì)important的并不是不支持！

那么為什么很多人都說(shuō)ie不認(rèn)識(shí)它呢？我想應(yīng)該是大家實(shí)戰(zhàn)中可能都沒(méi)有遇到例子中的情況： 當(dāng)你想提升class的優(yōu)先級(jí)時(shí)怎么辦？

也就是說(shuō)大家可能都忽略了它的這一作用，只了解在命名為同一個(gè)元素的CSS代碼塊中，用它來(lái)提升排列順序相對(duì)靠前的代碼的優(yōu)先級(jí)（例一）！

通過(guò)上邊兩個(gè)例子，得以總結(jié)：

important對(duì) 一個(gè)良好（或者是標(biāo)準(zhǔn)）的瀏覽器來(lái)說(shuō)，不僅僅是從順序上提升代碼的優(yōu)先級(jí)，還可以用來(lái)提升class的優(yōu)先級(jí)（比如firefox），但是從IE對(duì)前者的不支持可以看出，這只是IE的一大BUG，而不能說(shuō)它“不認(rèn)識(shí)、不支持”！

然而，不管怎么樣，IE的這一大BUG幫助我們解決了很多兼容性問(wèn)題，這顯然不是件壞事！

在IE中對(duì)盒模型（box-model）的解釋是有BUG的，IE6.0之前的版本會(huì)把某元素的邊框值和填充值包含在寬度之內(nèi)（而不是加在寬度值上）。例如，你可能會(huì)使用以下css來(lái)指定某個(gè)容器的尺寸：

代碼如下:

#box
{
width:100px;
border:5px;
padding:20px;
}

然后在html中應(yīng)用：盒的總寬度在幾乎所有瀏覽器中為150像素（100像素寬度+兩條5像素的邊框+兩個(gè)20像素的填充），唯獨(dú)在IE6之前版本的瀏覽器中仍然為100像素（邊框值和填充值包含在寬度值中），使用盒模型的hack可以解決這一問(wèn)題，

這樣一來(lái)在任何瀏覽器中盒的總寬度都將是150像素。

但是即使是到了最新的IE6.0依然存在浮動(dòng)模型（Float-model）的問(wèn)題,值得慶幸（還是悲哀？）的是我們可以用IE中一直都不支持的!important來(lái)解決這個(gè)問(wèn)題。
!important是CSS1就定義的語(yǔ)法，作用是提高指定樣式規(guī)則的應(yīng)用優(yōu)先權(quán)(參見(jiàn)：W3.org的解釋)。語(yǔ)法格式{ sRule!important }，即寫(xiě)在定義的最后面，

例如：

代碼如下:

box{color:red !important;}

假如我們定義一個(gè)這樣的樣式：

代碼如下:

#box{background-color: #ffffff !important; background-color: #000000;}

那么在支持該語(yǔ)法的瀏覽器，如Firefox、Opera中，能夠理解!important的優(yōu)先級(jí)，背景顯示#ffffff顏色，而在IE中則顯示#000000.

關(guān)于css中!important的作用是什么就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)站標(biāo)題：css中!important的作用是什么
標(biāo)題網(wǎng)址：http://www.chinadenli.net/article30/goospo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、外貿(mào)網(wǎng)站建設(shè)、小程序開(kāi)發(fā)、網(wǎng)站策劃、網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)