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

創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供龍門網(wǎng)站建設(shè)、龍門做網(wǎng)站、龍門網(wǎng)站設(shè)計(jì)、龍門網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、龍門企業(yè)網(wǎng)站模板建站服務(wù)，十多年龍門做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

下面是一個(gè)簡(jiǎn)單的無(wú)序列表：

<ulid="summer-drinks">

<li>汽水</li>

<li>啤酒</li>

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

如果現(xiàn)在你要指定其中一種你喜歡的飲料并改變它的樣式。你可以通過(guò)list元素上的類名來(lái)應(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è)樣式它沒(méi)有作用！你選擇添加樣式的飲料并沒(méi)有變成紅色，字體也沒(méi)有加粗

仔細(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è)。這就需要通過(guò)遵循一套標(biāo)準(zhǔn)的優(yōu)先級(jí)規(guī)則來(lái)實(shí)現(xiàn)。

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

.favorite{

color:red;

}

.favorite{

color:green;

}

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

這里的要點(diǎn)是你希望盡可能具體的理解。即使有上面提到的簡(jiǎn)單例子，最終你會(huì)明白，僅僅使用一個(gè)類名來(lái)定位“最喜歡的飲料”并不會(huì)削減它，或者即使它確實(shí)起作用也不會(huì)很安全。可以使用以下方法具體定義：

ul#summer-drinksli.favorite{

color:red;

font-weight:bold;

}

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

htmlbodydiv#pagewrapul#summer-drinksli.favorite{

color:red;

font-weight:bold;

}

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

.favorite{

color:red!important;

font-weight:bold!important;

}

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

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

.last{

margin-right:0!important;

}

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

為什么我們第一次嘗試更改顏色和字體重量失敗了？正如我們所了解的那樣，這是因?yàn)楹?jiǎn)單地使用類名本身具有較低的優(yōu)先級(jí)，并且被另一個(gè)選擇器覆蓋，該選擇器使用ID值定位無(wú)序列表。該句中的重要詞語(yǔ)是類和id。CSS對(duì)類和ID應(yīng)用了截然不同的優(yōu)先級(jí)權(quán)重。事實(shí)上，ID具有無(wú)限的優(yōu)先級(jí)價(jià)值！也就是說(shuō)，沒(méi)有任何類別的優(yōu)先級(jí)可以超過(guò)ID。

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

新聞名稱：css優(yōu)先級(jí)如何計(jì)算
本文URL：http://www.chinadenli.net/article6/gccdog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、Google、自適應(yīng)網(wǎng)站、標(biāo)簽優(yōu)化、做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(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)