第一章入門篇選擇符之間的關係
阿新 • • 發佈：2018-11-05
1.選擇符的覆蓋
CSS後面定義的樣式會把前面定義的樣式覆蓋
<style type ="text/css" > p{ color :Blue;} p{ color:Red;} /*最終p元素會文字會顯示紅色，把前面定義的藍色覆蓋了*/ </style>
2.選擇符的繼承
子元素可以繼承父元素中定義的樣式，比如在body中定義了字型大小，其子元素p可以繼承字型大小樣式
<style type ="text/css" > body { font-size:12px; } p{ color:Red;} /*p元素繼承body元素中的字型大小，字型大小為12px*/ </style>
但並不是所有元素都會繼承父元素的樣式，比如h1,h2,h3~h6這幾個元素將會應用瀏覽器預設樣式設定文字大小
3.選擇符的權重和優先順序
網頁中的樣式大致可以分為4種：HTML、作者、使用者、瀏覽器。HTML是HTML頁面中的樣式，包括內部樣式表（位於<head>內部）和內聯樣式（位於HTML元素上），作者就是CSS作者定義的樣式即外部樣式表，使用者即使用者在瀏覽器設定的樣式，瀏覽器就是瀏覽器的預設樣式。
所有樣式中標有!important的樣式權重最高，以上每種樣式權重由高到底依次為：
1.標有！important的樣式，如color：red !importan
2.內聯樣式>內部樣式
3.外部樣式表
4.使用者設定的樣式
5.瀏覽器的預設樣式
在外部樣式表中以選擇符的組合方式決定選擇符的權重，相同的組合方式根據定義的先後順序決定
<style type ="text/css" > #myColor { color:Green; } p{ color:Blue;} .myColor { color:Yellow; } p.myColor { color:Black; } </style>
<div class ="myColor"> <p>藍色</p> <p class ="myColor" >黑色</p> <p class ="myColor" id ="myColor" >綠色</p> <p class ="myColor" style ="color:Maroon;" >棕色</p> </div>
可以用如下規則計算權重值：
1.標籤選擇符、偽類偽物件優先順序為1
2.類選擇符、屬性選擇符優先順序為10
3.ID選擇符優先順序為100
4.style中的選擇符優先順序為1000
5.其他選擇符優先順序為0
根據以上規則把每個樣式組合中的選擇符優先順序相加，得出每個樣式的權重，如上的樣式權重為
p=1
.myColor=10
p.myColor=1+10=11
#myColor=100
style ="color:Maroon;"=1000