css中提升優(yōu)先級(jí)屬性!important的用法總結(jié)
發(fā)布時(shí)間：2014-08-08 10:20:22 作者：佚名 
我要評(píng)論
我要評(píng)論!important只有Ie7.0和firefox可以識(shí)別，但是Ie6.0不能成功應(yīng)用.!important提升優(yōu)先級(jí)，下面對(duì)它的用法做下總結(jié)
復(fù)制代碼
代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style>
<!--
!important只有Ie7.0和firefox可以識(shí)別，但是Ie6.0不能成功應(yīng)用.!important提升優(yōu)先級(jí)（或看成強(qiáng)制重定義-->
<!--
!important是CSS1就定義的語(yǔ)法，作用是提高指定樣式規(guī)則的應(yīng)用優(yōu)先權(quán)(參見(jiàn)：W3.org的解釋)。語(yǔ)法格式 {
sRule!important
}
，即寫在定義的最后面，例如：box {
color:red !important;
}
假如我們定義一個(gè)這樣的樣式： #box {
background-color: #ffffff !important;
background-color: #000000;
}
那么在支持該語(yǔ)法的瀏覽器，如Firefox、Opera中，能夠理解!important的優(yōu)先級(jí)，背景顯示#cccccc顏色，而在IE中則顯示#000000.能說(shuō)它“不認(rèn)識(shí)、不支持”！
-->
#box div {
color:red;
}
.important_false {
color:blue;
}
.important_true {
color:blue !important;
}
#box2 {
background-color: #cccccc !important;
background-color: #000000;
}
<!--
firefox：
下面這段如果放在最上面，則是紅色的， 如果放在最下面則是blue。說(shuō)明如果放在最上面，#box div覆蓋了#idColor，這時(shí)是id的優(yōu)先級(jí)。而.important_false的class優(yōu)先級(jí)小于id，沒(méi)有覆蓋掉#box div。
如果放在最下面，則#idColor沒(méi)有覆蓋.important_false。 如果不設(shè)置id="idColor", 則是blue。說(shuō)明.important_false 覆蓋掉了#box div
IE7:
#idColor放在最下面，是紅色的。放在最下面也是紅色的，去掉id屬性。也是紅色的。說(shuō)明都沒(méi)覆蓋#box div。
-->
#idColor {
color:gray;
}
</style>
</head>
<body>
<div id="box">
<div class="important_false" id="idColor">這一行末使用important。class的優(yōu)先級(jí)小于id的優(yōu)先級(jí)。IE7是紅色，firefox是藍(lán)色。</div>
<div class="important_true" >這一行使用了important</div>
</div>
<div id="box2"> 在不同的瀏覽器下，這行字的色應(yīng)該不同！IE7，F(xiàn)irefox是紅色。IE6是藍(lán)色</div>
</body>
</html>
相關(guān)文章
CSS中l(wèi)ink和@import的區(qū)別說(shuō)明
link與@import這兩種方式都是為了加載CSS文件,但還是存在著細(xì)微的差別。下面腳本之家小編給大家介紹CSS中l(wèi)ink和@import的區(qū)別說(shuō)明，感興趣的朋友一起看下吧2016-08-12淺談CSS 權(quán)值 層疊 重要性(!important)
下面小編就為大家?guī)?lái)一篇淺談CSS 權(quán)值 層疊 重要性(!important)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-05- 這篇文章主要介紹了CSS中的@import,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-07-14
加了important標(biāo)記css樣式的jQuery寫法
這篇文章主要介紹了加了important標(biāo)記css樣式的jQuery寫法，需要的朋友可以參考下2014-07-16從可維護(hù)性角度考慮css的!important規(guī)則的可用性
使用!important對(duì)于性能并沒(méi)有什么負(fù)面影響。但是從可維護(hù)性角度考慮還是少用這個(gè)規(guī)則。不過(guò)這個(gè)規(guī)則在IE6中有bug2014-06-05css @import url加載樣式應(yīng)用深入分析
一直以來(lái)寫CSS的時(shí)候都沒(méi)有過(guò)多的考慮使用@import的方式,最近又看到有朋友在討論關(guān)于@import的一些好壞，以及要不要使用@import的方式加載樣式,需要的朋友可以了解下2012-12-12css中l(wèi)ink和@import的區(qū)別分析詳解
本文章詳細(xì)的介紹了關(guān)于link和@import的區(qū)別，有需要了解的朋友可以參考一下本文章2012-03-31- 我們引用css文件通常有兩種方式:link,@import 這兩天整理了一下這兩種用法的區(qū)別，加深認(rèn)識(shí)2010-06-17
- 很多人，包括很多網(wǎng)站（我所見(jiàn)過(guò)的所有網(wǎng)站，包括國(guó)內(nèi)著名的‘網(wǎng)頁(yè)設(shè)計(jì)師’網(wǎng)站），都說(shuō)important是不被IE所支持和認(rèn)識(shí)的，可是真的是這樣嗎？看了下邊的兩個(gè)例子，也許你2010-01-05
Webpack 中 css import 使用 alias 相對(duì)路徑的方法
在 Vue 項(xiàng)目中，我們通常使用 vue-webpack 腳手架生成工程模板，然后配置 @ 為項(xiàng)目根目錄下放資源和源碼的 /src 目錄的別名。這篇文章給大家介紹Webpack 中 css import 使2018-07-24