本篇文章給大家分享的是有關(guān)瀏覽器中怎么判斷css優(yōu)先級，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

網(wǎng)站設(shè)計制作過程拒絕使用模板建站；使用PHP+MYSQL原生開發(fā)可交付網(wǎng)站源代碼;符合網(wǎng)站優(yōu)化排名的后臺管理系統(tǒng)；成都網(wǎng)站建設(shè)、成都網(wǎng)站制作收費(fèi)合理；免費(fèi)進(jìn)行網(wǎng)站備案等企業(yè)網(wǎng)站建設(shè)一條龍服務(wù).我們是一家持續(xù)穩(wěn)定運(yùn)營了10余年的創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)公司。

概念
瀏覽器是通過判斷優(yōu)先級，來決定到底哪些屬性值是與元素最相關(guān)的，從而應(yīng)用到該元素上。優(yōu)先級是由選擇器組成的匹配規(guī)則決定的。

如何計算?
優(yōu)先級是根據(jù)由每種選擇器類型構(gòu)成的級聯(lián)字串計算而成的. 它不是一個對應(yīng)相應(yīng)匹配表達(dá)式的權(quán)重值.

如果優(yōu)先級相同,元素最終會應(yīng)用 CSS 中靠后的聲明.

注意: 在文檔樹中的距離是不會對元素優(yōu)先級計算產(chǎn)生影響的.（可以看文檔中無視DOM樹中的距離的例子）

優(yōu)先級順序
下列是一份優(yōu)先級逐級增加的選擇器列表:

通用選擇器*
元素(類型)選擇器
類選擇器
屬性選擇器
偽類
ID 選擇器
內(nèi)聯(lián)樣式
事實上，元素還可以從父元素上繼承一些樣式，如color等屬性。這些繼承的樣式的優(yōu)先級永遠(yuǎn)低于元素本身的樣式，包括通用選擇器：

代碼如下:

<div id='test'>
    <a href="#">text</a>
</div></p> <p> * {
    color:red;
}

#test{
    color:blue;
}

最終text的顏色是紅色的。

!important 規(guī)則是例外
當(dāng)!important 規(guī)則被應(yīng)用在一個樣式聲明中時,該樣式聲明會覆蓋CSS中任何其他的聲明, 無論它處在聲明列表中的哪個位置. 盡管如此, !important規(guī)則還是與優(yōu)先級毫無關(guān)系使用!important不是一個好習(xí)慣，因為它改變了你樣式表本來的級聯(lián)規(guī)則，從而難以調(diào)試。

一些不成文規(guī)則

不要在全站范圍的css中使用!important.

只在需要覆蓋全站范圍的css或是外部css（例如引用的ExtJs或是YUI）的時候才在指定的頁面上使用 !important。

不要在你的插件中使用!important。

永遠(yuǎn)都要優(yōu)先考慮使用樣式規(guī)則的優(yōu)先級來解決問題而不是 !important。

取而代之，你可以:

更好的利用CSS的級聯(lián)屬性

更多的使用適合的選擇器。比如在你需要選定的對象元素前加上更多的元素，使選擇的范圍縮小，你的選擇器就變得更有針對性，從而提高優(yōu)先級：

代碼如下:

<div id="test">
  <span>Text</span>
</div>

div#test span { color: green }
span { color: red }
div span { color: blue }

無論你css語句的順序是什么樣的，文本都會是綠色的(green)因為這一條規(guī)則是最有特殊性、優(yōu)先級高的。（同理，無論語句順序怎樣，藍(lán)色(blue)的規(guī)則都會覆蓋紅色(red)的規(guī)則）

什么時候應(yīng)該使用：
A) 一種情況

你的網(wǎng)站上有一個設(shè)定了全站樣式的CSS文件，同時你（或是你同事）寫了一些效果通常都是很差的行內(nèi)樣式（行內(nèi)樣式的優(yōu)先級是高的）。

在這種情況下，你就可以在你全局的CSS文件中寫一些!important的樣式來覆蓋掉那些直接寫在元素上的行內(nèi)樣式。

活生生的例子比如：有人在jQuery插件里寫了糟糕的行內(nèi)樣式。

B) 另一種情況

代碼如下:

#someElement p {
    color: blue;
}

p.awesome {
    color: red;
}

在外層有 #someElement 的情況下，你怎樣能使 awesome 的段落變成紅色呢？這種情況下，如果不使用!important，第一條規(guī)則永遠(yuǎn)比第二條的優(yōu)先級更高。

怎樣覆蓋掉 !important

很簡單，你只需要再加一條 !important 的CSS語句，將其應(yīng)用到更高優(yōu)先級的選擇器（在原有基礎(chǔ)上添加額外的標(biāo)簽、class或id選擇器）上；或是保持選擇器一樣，但添加的位置需要在原有聲明的后面（優(yōu)先級相同的情況下，后邊定義的會覆蓋前邊定義的）。

代碼如下:

<div>
  <a href="#" id="test">text</a>
</div>

想要把原有的綠色文本變成紅色，提升優(yōu)先級的方式:

代碼如下:

#test.a{
  color: red !important;<!--盡管這條聲明在前，但是仍會覆蓋下邊的樣式-->
}
a{
  color: green !important;
}

不過

代碼如下:

a{
  color: green !important;
}
a{
  color: red !important;<!--同樣的選擇器，后邊的聲明會覆蓋前邊的-->
}

以上就是瀏覽器中怎么判斷css優(yōu)先級，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站欄目：瀏覽器中怎么判斷css優(yōu)先級-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://jinyejixie.com/article24/isjce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、搜索引擎優(yōu)化、網(wǎng)站維護(hù)、網(wǎng)站導(dǎo)航、品牌網(wǎng)站制作、全網(wǎng)營銷推廣

廣告

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