權重計算規(guī)則
專業(yè)領域包括網(wǎng)站制作、網(wǎng)站設計、商城網(wǎng)站定制開發(fā)、微信營銷、系統(tǒng)平臺開發(fā)， 與其他網(wǎng)站設計及系統(tǒng)開發(fā)公司不同，創(chuàng)新互聯(lián)的整合解決方案結合了幫做網(wǎng)絡品牌建設經(jīng)驗和互聯(lián)網(wǎng)整合營銷的理念，并將策略和執(zhí)行緊密結合，為客戶提供全網(wǎng)互聯(lián)網(wǎng)整合方案。
1.第一等：代表內(nèi)聯(lián)樣式，如: style=””，權值為1000。
2.第二等：代表ID選擇器，如：#content，權值為0100。
3.第三等：代表類，偽類和屬性選擇器，如.content，權值為0010。
4.第四等：代表類型選擇器和偽元素選擇器，如div p，權值為0001。
5.通配符、子選擇器、相鄰選擇器等的。如*、、+,權值為0000。
6.繼承的樣式?jīng)]有權值。
例外：!important 的作用是提升優(yōu)先級，換句話說。加了這句的樣式的優(yōu)先級是最高的（比內(nèi)聯(lián)樣式的優(yōu)先級還高)。
1、標記選擇器（如：body,div,p,ul,li）
2、id選擇器（如：id="name",id="name_txt"）
3、類選擇器（如：id="name",id="name_txt"）
4、后代選擇器（如：#head.navulli從父集到子孫集的選擇器）
5、子元素選擇器（如：divp,帶大于號）
6、偽類選擇器（如：就是鏈接樣式,a元素的偽類，4種不同的狀態(tài)：link、visited、active、hover。）
看完了基本的css選擇器類型后，我們接著來看一下css優(yōu)先級的概念。
當兩個規(guī)則都作用到了同一個html元素上時，如果定義的屬性有沖突，那么應該用誰的值的，用到誰的值誰的優(yōu)先級就高。
我們來看一下css選擇器優(yōu)先級的算法：
每個規(guī)則對應一個初始"四位數(shù)"：0、0、0、0
若是行內(nèi)選擇符，則加1、0、0、0
若是ID選擇符，則加0、1、0、0
若是類選擇符/偽類選擇符，則分別加0、0、1、0
若是元素選擇符，則分別加0、0、0、1
算法：將每條規(guī)則中，選擇符對應的數(shù)相加后得到的”四位數(shù)“，從左到右進行比較，大的優(yōu)先級越高。
看完了上述內(nèi)容，那我們就來看看css選擇器優(yōu)先級的具體排序。
css選擇器優(yōu)先級最高到最低順序為：
1.id選擇器（#myid）
2.類選擇器（.myclassname）
3.標簽選擇器（div,h1,p）
4.子選擇器（ulli）
5.后代選擇器（lia）
6.偽類選擇（a:hover,li:nth-child）
最后，需要注意的是：
!important的優(yōu)先級是最高的，但出現(xiàn)沖突時則需比較”四位數(shù)“;
優(yōu)先級相同時，則采用就近原則，選擇最后出現(xiàn)的樣式;
繼承得來的屬性，其優(yōu)先級最低。
CSS權重是由四個數(shù)值決定，看一張圖比較好解釋：
圖里是英文的，我翻譯過來分別說一下，4個等級的定義如下：
第一等：代表內(nèi)聯(lián)樣式，如: style=””，權值為1000。
第二等：代表ID選擇器，如：#content，權值為100。
第三等：代表類，偽類和屬性選擇器，如.content，權值為10。
第四等：代表類型選擇器和偽元素選擇器，如div p，權值為1。
最后把這些值加起來，再就是當前元素的權重了。
權重算出來了，但是某個元素到底用哪個樣式，還有3個規(guī)則,：
1，如果樣式上加有!important標記，例如：
p{?color:?gray?!important}
那么始終采用這個標記的樣式。
2，匹配的內(nèi)容按照CSS權重排序，權重大的優(yōu)先；
可以看到，CSS權重只是決定應用哪個樣式的其中一個步驟，不過這個步驟是最復雜的，上面已經(jīng)說過了。
3，如果權重也一樣，按照它在CSS樣式表里聲明的順序，后聲明的優(yōu)先，例如：
h1?{color:?blue}
h1?{color:?red}
最終勝出的是color: red。
[img]1、!important，加在樣式屬性值后，權重值為 10000
2、內(nèi)聯(lián)樣式，如：style=””，權重值為1000
3、ID選擇器，如：#content，權重值為100
4、類，偽類和屬性選擇器，如： content、:hover 權重值為10
5、標簽選擇器和偽元素選擇器，如：div、p、:before 權重值為1
6、通用選擇器（*）、子選擇器（）、相鄰選擇器（+）、同胞選擇器（~）、權重值為0
1、類型選擇器
CSS中的一種選擇器是元素類型的名稱。使用這種選擇器(稱為類型選擇器)，可以向這種元素類型的每個實例上應用聲明。例如，以下簡單規(guī)則的選擇器是H1，因此規(guī)則作用于文檔中所有的H1元素。
2、簡單屬性選擇器
CLASS屬性
CLASS屬性允許向一組在CLASS屬性上具有相同值的元素應用聲明。BODY內(nèi)的所有元素都有CLASS屬性。從本質(zhì)上講，可以使用CLASS屬性來分類元素，在樣式表中創(chuàng)建規(guī)則來引用CLASS屬性的值，然后瀏覽器自動將這些屬性應用到該組元素。
類選擇器以標志符(句點)開頭，用于指示后面是哪種類型的選擇器。對于類選擇器，之所以選擇句點是因為在很多編程語言中它與術語"類"相關聯(lián)。翻譯成英語，標志符表示"帶有類名的元素"。
ID屬性
ID屬性的操作類似于CLASS屬性，但有一點重要的不同之處:ID屬性的值在整篇文檔中必須是唯一的。這使得ID屬性可用于設置單個元素的樣式規(guī)則。包含ID屬性的選擇器稱為ID選擇器。
需要注意的是，ID選擇器的標志符是散列符號(#)。標志符用來提醒瀏覽器接下來出現(xiàn)的是ID值。
STYLE屬性
盡管在選擇器中可以使用CLASS和ID屬性值，STYLE屬性實際上可以替代整個選擇器機制。不是只具有一個能夠在選擇器中引用的值(這正是ID和CLASS具有的值)，STYLE屬性的值實際上是一個或多個CSS聲明。
通常情況下，使用CSS，設計者將把所有的樣式規(guī)則置于一個樣式表中，該樣式表位于文檔頂部的STYLE元素內(nèi)(或在外部進行鏈接)。但是，使用STYLE屬性能夠繞過樣式表將聲明直接放置到文檔的開始標記中。
3、組合選擇器類型
可以將類型選擇器、ID選擇器和類選擇器組合成不同的選擇器類型來構成更復雜的選擇器。通過組合選擇器，可以更加精確地處理希望賦予某種表示的元素。例如，要組合類型選擇器和類選擇器，一個元素必須滿足兩個要求:它必須是正確的類型和正確的類以便使樣式規(guī)則可以作用于它。
外部信息:偽類和偽元素
在CSS1中，樣式通常是基于在HTML源代碼中出現(xiàn)的標記和屬性。對于很多設計情景而言這種做法完全可行，但是它無法實現(xiàn)設計者希望獲得的一些常見的設計效果。
設計偽類和偽元素可以實現(xiàn)其中的一些效果。這兩種機制擴充了CSS的表現(xiàn)能力。在CSS1中，使用偽類可以根據(jù)一些情況改變文檔中鏈接的樣式，如根據(jù)鏈接是否被訪問，何時被訪問以及用戶和文檔的交互方式來應用改變。借助于偽元素，可以更改元素的第一個字母和第一行的樣式，或者添加源文檔中沒有出現(xiàn)過的元素。
偽類和偽元素都不存在于HTML;也就是說，它們在HTML代碼中是不可見的。這兩種機制都得到了精心設計以便能夠在CSS以后的版本中做進一步地擴充;也就是說實現(xiàn)更多的效果。
層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現(xiàn)HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。
CSS 能夠?qū)W(wǎng)頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。
重慶分公司
重慶分公司
