CSS中的樣式優(yōu)先級是什么-創(chuàng)新互聯(lián)

小編給大家分享一下CSS中的樣式優(yōu)先級是什么，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)公司從2013年開始，是專業(yè)互聯(lián)網(wǎng)技術服務公司，擁有項目成都網(wǎng)站建設、網(wǎng)站制作網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元鳳山做網(wǎng)站,已為上家服務,為鳳山各地企業(yè)和個人服務,聯(lián)系電話:028-86922220

控制html元素的三個css規(guī)則：

css優(yōu)先級計算

css繼承

css層疊

學習這些規(guī)則將使您的CSS開發(fā)更上一層樓。

優(yōu)先級計算

想象一下，你的html包含一個應用了一類“生物”的段落。您還有以下兩個css規(guī)則：

p { font-size ：12px }
p.bio { font-size ：14px }

你希望段落中的文字大小是12px還是14px？在這種情況下你可以猜測它將是14px。css（p.bio）的第二行比你的class =“bio”段更具體。然而，有時優(yōu)先級并不容易看到。

例如，考慮以下html和css

<div id = “sidebar” >
<p class = “bio” >文字在這里</ p>
</ div>

div p.bio { font-size ：14px }
#sidebar p { font-size ：12px }

乍一看，第一行css可能看起來更具體，但實際上上面的第二行更符合段落的字體大小。這是為什么？

要回答這個問題，我們需要考慮優(yōu)先級規(guī)則。

通過計算css的各種成分并以（a，b，c，d）形式表達它們來計算特異性。這將通過一個例子更清楚，但首先是組件。

元素，偽元素：d = 1 - （0,0,0,1）

類，偽類，屬性：c = 1 - （0,0,1,0）

Id：b = 1 - （0,1,0,0）

內(nèi)聯(lián)樣式：a = 1 - （1,0,0,0）

id比類更具體而不是元素。

您可以通過計算上述每一項并將a，b，c或d加1來計算優(yōu)先級。同樣重要的是要注意0,0,1,0比0,0,0,15更具體。讓我們看一些例子來使計算更清晰。

p：1個元素 - （0,0,0,1）

div：1個元素 - （0,0,0,1）

#sidebar：1個id - （0,1,0,0）

div＃sidebar：1個元素，1個id - （0,1,0,1）

div＃sidebar p：2個元素，1個id - （0,1,0,2）

div＃sidebar p.bio:2個元素，1個類，1個id - （0,1,1,2）

讓我們再看一下上面的例子

div p.bio { font-size ：14px }  - （0,0,1,2）
#sidebar p { font-size ：12px }  - （0,1,0,1）

第二個具有更高的優(yōu)先級，因此優(yōu)先。

在我們前進之前的最后一點。重要性勝過優(yōu)先級，當你使用！important標記css屬性時，你會覆蓋優(yōu)先級規(guī)則等等

div p.bio { font-size ：14px ！important }    
#sidebar p { font-size ：12px }

表示上面的第一行css優(yōu)先于第二行而不是第二行。！important仍然是圍繞基本規(guī)則的特殊性，如果您了解規(guī)則的運作方式，您應該永遠不需要。

繼承

繼承背后的想法相對容易理解。元素從其父容器繼承樣式。如果將body標簽設置為使用color：red，那么除非另有說明，否則正文中所有元素的文本也將為紅色。

但是，并非所有css屬性都是繼承的。例如，邊距和填充是非繼承屬性。如果在div上設置邊距或填充，則div內(nèi)的段落不會繼承您在div上設置的邊距和填充。該段落將使用默認的瀏覽器邊距和填充，直到您另外聲明。

但是，您可以顯式設置屬性以從其父容器繼承樣式。例如，您可以聲明

p { margin ：inherit ; 填充：繼承 }

然后你的段落將從它的包含元素繼承。

層疊

在最高級別，層疊是控制所有css優(yōu)先級的，并且如下工作。

1、查找適用于相關元素和屬性的所有css聲明。

2、按原點和重量排序。Origin指的是聲明的來源（作者樣式，用戶樣式，瀏覽器默認值），權重指的是聲明的重要性。（作者的權重大于用戶的權重大于默認值。！important比正常聲明更重要）

3、計算優(yōu)先級

4、如果上述所有規(guī)則中的兩個規(guī)則相同，那么最后一個規(guī)則獲勝。嵌入在html中的CSS總是在外部樣式表之后，而不管html中的順序如何。

上面的＃3很可能是你最需要注意的。使用＃2只需了解您的樣式將覆蓋用戶設置瀏覽器的方式，除非他們將規(guī)則設置為重要。

還要意識到您的樣式將覆蓋瀏覽器默認值，但這些默認值確實存在，并且通常會導致跨瀏覽器問題。使用重置文件，如Eric Meyer的CSS重置或Yahoo的YUI重置CSS有助于將默認樣式排除在等式之外。

總結(jié)

希望以上內(nèi)容有助于理清您的一些CSS優(yōu)先級問題。大多數(shù)情況下，如果你的風格存在沖突，問題將歸結(jié)為優(yōu)先級。有時你還沒有聲明一些css，但是一個元素的行為方式你并不期望它可能從父容器或瀏覽器的默認樣式繼承了某些css。

聲明css時的一般經(jīng)驗法則是聲明具有最小優(yōu)先級的屬性來設置元素的樣式。例如，使用#sidebar而不是div＃sidebar。我承認打破這個一般規(guī)則遠遠超過我應該，但通過使用所需的最小優(yōu)先級，它將使您更容易通過聲明更具體的樣式來覆蓋樣式。

如果您使用最具優(yōu)先級，您可能會在以后遇到問題并發(fā)現(xiàn)自己必須添加不必要的HTML以便能夠添加更多優(yōu)先級，或者您可能會發(fā)現(xiàn)自己不再使用！important或聲明內(nèi)聯(lián)樣式。從最小的優(yōu)先級開始，僅在需要時添加更多。

看完了這篇文章，相信你對CSS中的樣式優(yōu)先級是什么有了一定的了解，想了解更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

分享標題：CSS中的樣式優(yōu)先級是什么-創(chuàng)新互聯(lián)
URL地址：http://bm7419.com/article48/hcehp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導航、微信公眾號、品牌網(wǎng)站設計、外貿(mào)建站、網(wǎng)站排名、服務器托管

廣告

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