舉個例子，標簽P，也許會在嵌入樣式表、外部樣式表中多次被設置相關屬性的值(比如color: red;/color : blue)，那么瀏覽器到底是以哪個值來顯示P的樣式呢？？？這就是CSS的工作原理。（其中特指度比較重要）
CSS有3種工作機制：1.繼承 2.層疊 3.特指 （其中層疊原則是基於繼承和特指的）
1.繼承 ：css中的祖先元素會向后代傳遞一樣東西：CSS屬性的值。body是所有元素的祖先，如果我們指定body{color:red;},那么文檔中的所有元素都繼承這一樣式。這就是為什么，我們在記事本程序寫了一行字以后，重命名為：xxx.html，在用不同瀏覽器打開時，會有不同的字體效果，因為每個瀏覽器都有自己的預定義樣式表，其中包括body中的字體屬性，而我們用瀏覽器打開我們的Html時，我們繼承了這個屬性。
當然，不是所有的屬性都能被繼承，能被繼承的屬性大多數和文本有關，比如顏色、字體、字號等。而有些屬性，被繼承下來沒有意義，或者被繼承下來會影響頁面的布局，比如涉及元素定位，margin,padding，border等屬性。
2.層疊 ：也就是CSS中的C（cascading）,主要是按照樣式來源和特指度來層疊。
a）樣式來源 ：以下是瀏覽器層疊各個來源樣式的順序：
- 瀏覽器默認樣式表
- 用戶樣式表（比如有視力障礙的用戶，加了一個body{font-size:200%}）
- 開發者外部樣式表（按照引入到頁面中的先后順序）
- 開發者嵌入樣式表
- 開發者行內樣式表
- 注意：3 4的順序是看<style>嵌入樣式標簽的位置，和<link>標簽的位置，標簽在后的被選中,請看例子2
越往下的優先級越高，也就是說瀏覽器會優先選擇后面來源設置的樣式（如果存在的話）
b)特指度 ：是針對選擇器的計分規則，分高的選擇器會被選中。公式有3個需要計算的值 ：I-C-E ，規則如下
- 選擇器中有一個ID選擇器，就在I上加1
- 選擇器中有一個類選擇器，就在C上加1
- 選擇器中有一個標簽名，就在E上加1
- 得到一個3位數
- 先比較高位，高位高既為高，比如1-0-0 是比 0-12-0 高的，優先選擇。以此類推，如果特制度相同，后申明的樣式被選中。
選擇器，也有叫選擇符的，英文應該是selector，CSS有很多種選擇器，此處不詳談。
舉個特指度的例子：
| 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>嵌入樣式表在后，為紅色。
如果是這個順序，style標簽在前，link在后
<style>
.li1{color: red;}
</style>
<link rel="stylesheet" href="demo.css">
</head>
為黃色
例子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>
列表項為黑色。