css樣式詳解及覆蓋順序
覆蓋順序
根據權重值，載入如下：瀏覽器預設值<外部樣式<內部樣式<內聯樣式。權重小的被權重大的覆蓋。
但是，需要考慮一種情況，如在外部樣式表中在id選擇器和類選擇器中都定義了元素的顏色，那應該怎麼辦？或者在一個元素的多個class中均設定了不同的元素顏色，要按照哪個顯示？這也需要指定覆蓋順序。
下邊是權重值： 類選擇器(.class) < 類派生選擇器(.class h1) < ID選擇器(#id) < ID派生選擇器(#id h1)
所以完整的層疊優先順序是:
瀏覽器預設 < 外部樣式表(css檔案) < 外部樣式表類選擇器 < 外部樣式表類派生選擇器 < 外部樣式表ID選擇器 < 外部樣式表ID派生選擇器 < 內部樣式表(<style>
共12個優先順序
如果同一個元素在沒有其他樣式的作用影響下，其Class定義了多個並以空格分開，其優先順序順序為：一個元素同時應用多個class，後定義的優先(即近者優先)，加上!important者最優先! 注意，和在class中的書寫順序無關
樣式類別
共四中。
瀏覽器預設值
即寫簡單的html程式碼，在瀏覽器中展示出來的樣式。它依賴於瀏覽器的實現。如下
<h1>123</h1>
內聯樣式
即由style屬性定義的樣式。
<h1 style='border : 1px solid;'>123</h1>
內部樣式表
即由<style></style>標籤定義的樣式。
<style>
h1{
background:red;
}
</style>
外部樣式表
單獨的css檔案，由標籤使用href引入。
<link rel="stylesheet" href="/lib/share/css/share.min.css">
選擇器
在內部樣式表和外部樣式表中，還有不同的選擇器。需要注意的是，這些選擇器都不是獨立的，你可以任意的選擇起來組合，這正是css選擇器的強大之處，也是彌補style屬性的不足之處。
基本選擇器
這個基本選擇器並不是CSS中定義的，而是相對於後代選擇器，我自己分類的，它們都是單一的、不影響子節點的選擇器。
元素選擇器
文件的元素就是最基本的選擇器。下邊的規則匹配所有的h1元素
h1{
background:red;
}
屬性選擇器
選擇包含某種屬性的元素。
/*選擇所有帶有title屬性的元素*/
*[title] {
color:red;
}
/*選擇所有帶有href的a標籤*/
a[href]{
color: #0e2231;
}
根據具體屬性值選擇
除了選擇擁有某些屬性的元素，還可以進一步縮小選擇範圍，只選擇有特定屬性值的元素。
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
類和id屬性
特殊的，如果要選擇id為特定值或者class為特定值的元素，可以簡寫如下(注意元素和點或者#之間沒有空格，如果有空格，就變成後代選擇器了)：
/*選擇class為test的div*/
div.test{
color: #000;
}
/*選擇id為test的div*/
div#test{
color: #000;
}
類選擇器（.class）
以點開頭，在html元素中使用class屬性引入。這是css最常用的方式。因為一般來說id選擇器為javascript服務的可能性更大且在上下文必須保持唯一，所以css儘量不使用id選擇器，避免和javascript產生不必要的交叉衝突。
/*選擇所有class屬性中包含test的元素*/
.test{
background:red;
}
<div class="test">123</div>
<p class="test">123</div>
id選擇器（#id）
以井號#開頭，在html元素中使用id屬性引入。因為id屬性為javascript服務的可能性更大且在上下文必須保持唯一，所以css儘量不使用id選擇器，避免和javascript產生不必要的交叉衝突。
/*選擇所有class屬性中包含test的元素*/
#test{
background:red;
}
<div id="test">123</div>
<p class="test">123</div>
選擇器分組
假如現在有一個需求，讓所有的h元素背景為紅色。那麼實現方式如下：
/*第一種*/
h1{
background:red;
}
h2{
background:red;
}
h3{
background:red;
}
/*第二種*/
h1,h2,h3{
background: red;
}
顯然第二種寫法更符合我們的習慣。這種在選擇器之間用逗號隔開的寫法就是選擇器分組。
後代選擇器
在後代選擇器中，規則左邊的選擇器一端包括兩個或多個用空格分隔的選擇器。選擇器之間的空格是一種結合符（combinator）。每個空格結合符可以解釋為“… 在 … 找到”、“… 作為 … 的一部分”、“… 作為 … 的後代”，但是要求必須從右向左讀選擇器。
有關後代選擇器有一個易被忽視的方面，即兩個元素之間的層次間隔可以是無限的。
派生選擇器
感覺派生選擇器就是後代選擇器。只是目前我還不知道類派生和id派生的優先順序是否有差別。所以暫時先這樣寫。
類派生選擇器（.class h1）
以class選擇器開始，後邊跟上其它元素選擇器、id選擇器或者類選擇器，中間用空格隔開。這樣的寫法就是類派生選擇器
/*選擇class屬性為test元素下的h1元素。.test下的其它元素不受影響*/
.test h1{
background:red;
}
<div class="test">123<h1>456</h1></div>
<p class="test">123</div>
id派生選擇器（#id h1）
類似於類選擇器。以id選擇器開始，後邊跟上其它元素選擇器、id選擇器或者類選擇器，中間用空格隔開。這樣的寫法就是id派生選擇器
/*選擇id屬性為test元素下的h1元素。.id下的其它元素不受影響*/
#test h1{
background:red;
}
<div #="test">123<h1>456</h1></div>
<p class="test">123</div>
子元素選擇器
與後代選擇器相比，子元素選擇器（Child selectors）只能選擇作為某元素子元素的元素。可以說子元素是一種特殊的後代選擇器
子結合符兩邊可以有空白符，這是可選的。
如果您希望選擇只作為 h1 元素子元素的 strong 元素，可以這樣寫：
h1 > strong {color:red;}
相鄰兄弟選擇器
相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素後的元素，且二者有相同父元素。
相鄰兄弟選擇器使用了加號（+），即相鄰兄弟結合符（Adjacent sibling combinator）。
註釋：與子結合符一樣，相鄰兄弟結合符旁邊可以有空白符
如果要增加緊接在 h1 元素後出現的段落的上邊距，可以這樣寫：
h1 + p {margin-top:50px;}
這個選擇器讀作：“選擇緊接在 h1 元素後出現的段落，h1 和 p 元素擁有共同的父元素”。
偽類選擇器
比如說a標籤，它有很多種狀態：未點選、已點選、滑鼠移入、正在活動…，這就需要使用偽類選擇器。
偽類選擇器使用半形冒號作為結合符
錨偽類
a:link {color: #FF0000} /* 未訪問的連結 */
a:visited {color: #00FF00} /* 已訪問的連結 */
a:hover {color: #FF00FF} /* 滑鼠移動到連結上 */
a:active {color: #0000FF} /* 選定的連結 */
:first-child 偽類
使用 :first-child 偽類來選擇元素的第一個子元素。它的使用一定是結合了父元素的，即父元素下的第一個子元素，如果沒有指定父元素，則對於全部節點有效
p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}
第一個規則將作為某元素第一個子元素的所有 p 元素設定為粗體。第二個規則將作為某個元素（在 HTML 中，這肯定是 ol 或 ul 元素）第一個子元素的所有 li 元素變成大寫。
:lang偽類
:lang 偽類 :lang 偽類使你有能力為不同的語言定義特殊的規則。在下面的例子中，:lang 類為屬性值為 no 的 q 元素定義引號的型別：
<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>
<body>
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body></html>
偽元素
偽元素也是比較重要的。隨處可見:after和:before的使用
:before 偽元素
“:before” 偽元素可以在元素的內容前面插入新內容。
下面的例子在每個
元素前面插入一幅圖片：
h1:before
{
content:url(logo.gif);
}
:after
“:after” 偽元素可以在元素的內容後面插入新內容。
下面的例子在每個
元素後面插入一幅圖片：
h1:after
{
content:url(logo.gif);
}
:first-letter
向文字的第一個字母新增特殊樣式。
:first-line
向文字的首行新增特殊樣式。