CSS的工做原理（樣式重複的標籤，瀏覽器到底會選擇哪一個樣式？？）

時間 2019-11-17

原文原文鏈接

舉個例子，標籤P，也許會在嵌入樣式表、外部樣式表中屢次被設置相關屬性的值(好比color: red;/color : blue)，那麼瀏覽器究竟是以哪一個值來顯示P的樣式呢？？？這就是CSS的工做原理。（其中特指度比較重要）css

CSS有3種工做機制：1.繼承 2.層疊 3.特指（其中層疊原則是基於繼承和特指的）html

1.繼承：css中的祖先元素會向後代傳遞同樣東西：CSS屬性的值。body是全部元素的祖先，若是咱們指定body{color:red;},那麼文檔中的全部元素都繼承這同樣式。這就是爲何，咱們在記事本程序寫了一行字之後，重命名爲：xxx.html，在用不一樣瀏覽器打開時，會有不一樣的字體效果，由於每一個瀏覽器都有本身的預約義樣式表，其中包括body中的字體屬性，而咱們用瀏覽器打開咱們的Html時，咱們繼承了這個屬性。瀏覽器

固然，不是全部的屬性都能被繼承，能被繼承的屬性大多數和文本有關，好比顏色、字體、字號等。而有些屬性，被繼承下來沒有意義，或者被繼承下來會影響頁面的佈局，好比涉及元素定位，margin,padding，border等屬性。佈局

2.層疊：也就是CSS中的C（cascading）,主要是按照樣式來源和特指度來層疊。字體

a）樣式來源：如下是瀏覽器層疊各個來源樣式的順序：spa

瀏覽器默認樣式表
用戶樣式表（好比有視力障礙的用戶，加了一個body{font-size:200%}）
開發者外部樣式表（按照引入到頁面中的前後順序）
開發者嵌入樣式表
開發者行內樣式表
注意：3 4的順序是看<style>嵌入樣式標籤的位置，和<link>標籤的位置，標籤在後的被選中,請看例子2

越往下的優先級越高，也就是說瀏覽器會優先選擇後面來源設置的樣式（若是存在的話）code

b)特指度：是針對選擇器的計分規則，分高的選擇器會被選中。公式有3個須要計算的值：I-C-E ，規則以下htm

選擇器中有一個ID選擇器，就在I上加1
選擇器中有一個類選擇器，就在C上加1
選擇器中有一個標籤名，就在E上加1
獲得一個3位數
先比較高位，高位高既爲高，好比1-0-0 是比 0-12-0 高的，優先選擇。以此類推，若是特製度相同，後申明的樣式被選中。

選擇器，也有叫選擇符的，英文應該是selector，CSS有不少種選擇器，此處不詳談。blog

舉個特指度的例子：繼承

p	0-0-1特指度=1
p.classp1	0-1-1特指度是11
p#idp1	1-0-1特指度是101
body p#idp1	1-0-2特指度是102
body p#idp1 ul.classul1	1-1-3特指度是113
body p#idp1 ul.classul1 li	1-1-4特指度是114

基於3種工做機制，總結3條規則，適用全部狀況。

1）ID選擇器大於類選擇器，類選擇器大於標籤選擇器。一句話：特指度高的選擇器（選擇的更明確）被選中。

2）瀏覽器按照html文檔順序讀取各個樣式表，後面的樣式表會覆蓋掉前面樣式表的相同屬性的樣式。若是後面的樣式特指度低，則沒法覆蓋前面的樣式

注意：規則1 強於規則2 ，若是特指度高，不管在哪裏（除去行內），都會被選中。行內的優先級最高（可是行內的style通常不用，<p style="">），其次是特指度。

3）設定的樣式優於繼承的樣式

例子1 ：id選擇器優於類選擇器
<style>
    .li1{color: red;}
    #li1{color:yelow;}
</style>
<link rel="stylesheet" href="demo.css">
</head>
<body>
    <div id="div1">
        <ul class="ul1">
            <li id="li1" class="li1">列表項1</li>      
        </ul>
   </div>
列表1爲黃色

例子2 ：嵌入樣式表和外部樣式表，選哪一個（主要看瀏覽器按順序，後讀取的會覆蓋點前面讀取的），相同特指度的時候
<link rel="stylesheet" href="demo.css">
<style>
    .li1{color: red;}
</style>
</head>
<body>
    <div id="div1">
        <ul class="ul1">
            <li id="li1" class="li1">列表項1</li>

（黃色）外部樣式表
demo.css

.li1{
color:yellow;}

若是是這個順序，style標籤在前，link在後

爲黃色

例子3：選擇特指度高的（如按順序，應該選擇link的黃色，可是style中的特指度高 1-0-2 大於 1-0-1，因此選特指度高的紅色），後面讀取的特指度低的就不會覆蓋前面特指度高的。
<style>
    body div #li1{color: red;}
</style>
<link rel="stylesheet" href="demo.css">
</head>
<body>
    <div id="div1">
        <ul class="ul1">
            <li id="li1" class="li1">列表項1</li>

demo.css

div #li1{
color:yellow;}

爲紅色

例子4：行內style有最高優先級，前面的代碼不變，只在p中加了style blue,列表項立馬變成藍色
雖然行內的有最高優先級，可是行內style自己就不經常使用（不方便移植，增長網頁大小）
<li id="li1" class="li1" style="color:blue;">列表項1</li>

例子5 ：設定的樣式優於繼承的樣式，即便繼承的樣式特指度高（在li中加入em,em繼承了li的特指度是102，em自己的特指度是001，可是仍然選em）
<style>
    body div #li1{color: red;}
    em{ color:black;}
</style>
</head>
<body>
    <div id="div1">
        <ul class="ul1">
            <li id="li1" class="li1"><em>列表項1</em></li>    
        </ul>列表項爲黑色。