css優(yōu)先級如何計(jì)算

本文小編為大家詳細(xì)介紹“css優(yōu)先級如何計(jì)算”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“css優(yōu)先級如何計(jì)算”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

　　下面是一個(gè)簡單的無序列表：

　　<ulid="summer-drinks">

　　<li>汽水</li>

　　<li>啤酒</li>

　　<li>果汁</li></ul>

　　如果現(xiàn)在你要指定其中一種你喜歡的飲料并改變它的樣式。你可以通過list元素上的類名來應(yīng)用它。

　　<ulid="summer-drinks">

　　<liclass="favorite">汽水</li>

　　<li>啤酒</li>

　　<li>果汁</li></ul>

　　現(xiàn)在你就可以在css中為它添加樣式

　　.favorite{

　　color:red;

　　font-weight:bold;

　　}

　　然后你看你的實(shí)現(xiàn)效果會(huì)發(fā)現(xiàn)這個(gè)樣式它沒有作用！你選擇添加樣式的飲料并沒有變成紅色，字體也沒有加粗

　　仔細(xì)觀察css中的代碼你就會(huì)發(fā)現(xiàn)，有兩個(gè)選擇器

　　ul#summer-drinksli{

　　font-weight:normal;

　　font-size:12px;

　　color:black;}

　　兩個(gè)不同的CSS選擇器都定義了文本顏色和字體重量。字體大小只有一個(gè)聲明，所以很明顯一個(gè)會(huì)生效。這些不是“沖突”，但瀏覽器確實(shí)需要決定這些定義了的內(nèi)容中需要實(shí)現(xiàn)哪一個(gè)。這就需要通過遵循一套標(biāo)準(zhǔn)的優(yōu)先級規(guī)則來實(shí)現(xiàn)。

　　這可能會(huì)讓一些初學(xué)者感到困惑，因?yàn)樗麄兩形赐耆鉀Q這個(gè)問題。他們可能會(huì)認(rèn)為因?yàn)?favorite語句“在CSS中更進(jìn)一步”，或者因?yàn)閏lass=“favorite”在HTML中“更接近實(shí)際文本”，將是優(yōu)先的。實(shí)際上，CSS中選擇器的順序確實(shí)發(fā)揮了作用，當(dāng)優(yōu)先級完全相同時(shí)，后來定義的內(nèi)容實(shí)際上是先執(zhí)行的，例如：

　　.favorite{

　　color:red;

　　}

　　.favorite{

　　color:green;

　　}

　　執(zhí)行的結(jié)果字體的顏色會(huì)變綠

　　這里的要點(diǎn)是你希望盡可能具體的理解。即使有上面提到的簡單例子，最終你會(huì)明白，僅僅使用一個(gè)類名來定位“最喜歡的飲料”并不會(huì)削減它，或者即使它確實(shí)起作用也不會(huì)很安全?？梢允褂靡韵路椒ň唧w定義：

　　ul#summer-drinksli.favorite{

　　color:red;

　　font-weight:bold;

　　}

　　這就是我所說的“具體而言才有意義”。你實(shí)際上可能更具體，并使用這樣的東西：

　　htmlbodydiv#pagewrapul#summer-drinksli.favorite{

　　color:red;

　　font-weight:bold;

　　}

　　但有時(shí)候代碼會(huì)很長。它會(huì)使的CSS代碼的閱讀性降低，并沒有產(chǎn)生任何實(shí)際好處。為“.favorite”類提取特異性值的另一種方法是使用！important聲明。

　　.favorite{

　　color:red!important;

　　font-weight:bold!important;

　　}

　　我曾經(jīng)聽說過！important是CSS的絕地思維技巧。也確實(shí)如此，您可以通過使用它來強(qiáng)制您的元素樣式。但是，通過大幅提高特定選擇者使用的特殊性，將會(huì)產(chǎn)生一些不必要的問題。如果被錯(cuò)誤理解，那么！important聲明很容易被濫用。它最好用于保持CSS整潔，例如，您知道具有特定類選擇器的元素應(yīng)該使用某種樣式集。相反，不僅僅用作快速的使用方法來覆蓋某些東西的樣式，而不是弄清楚原始作者如何構(gòu)造和使用CSS。

　　我的一個(gè)經(jīng)典例子是：

　　.last{

　　margin-right:0!important;

　　}

　　計(jì)算CSS選擇器優(yōu)先級

　　為什么我們第一次嘗試更改顏色和字體重量失敗了？正如我們所了解的那樣，這是因?yàn)楹唵蔚厥褂妙惷旧砭哂休^低的優(yōu)先級，并且被另一個(gè)選擇器覆蓋，該選擇器使用ID值定位無序列表。該句中的重要詞語是類和id。CSS對類和ID應(yīng)用了截然不同的優(yōu)先級權(quán)重。事實(shí)上，ID具有無限的優(yōu)先級價(jià)值！也就是說，沒有任何類別的優(yōu)先級可以超過ID。

讀到這里，這篇“css優(yōu)先級如何計(jì)算”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。