Css之選擇器使用
我們都知道，CSS 指層疊樣式表 (Cascading Style Sheets)，主要用來為html 元素定義顯示樣式。本文主要來看一下css的選擇器，選擇器用來定義css的樣式，一般有以下幾種：
ID選擇器
ID選擇器，通過
#識別符號來為selector設定id，然後html元素通過該ID可以獲得指定的樣式，如：<style> #name{ color:red; } </style> <!--下面文字是紅色的--> <p id="name">red text</p>類選擇器
類選擇器即class選擇器，通過
.來修飾selector，然後html元素通過class=”xxx”來指定該樣式。它與id選擇器的區別在於：id選擇器只能由一組元素使用，而類選擇器可以由多個元素使用。<style> .value{ text-align:center; } </style> <!--下面的文字是居中對齊的--> <p class="value">center text</p>元素選擇器
元素選擇器即標籤選擇器，使用html標籤名作為selector的名字，後面使用該標籤都會預設渲染該樣式。
<style> p{ font-style:italic; } </style> <!--下面的文字是斜體的--> <p >italic text</p>包含選擇器
包含選擇器即後代選擇器，指定了目標選擇器必須處在某個選擇器的元素內部才能生效，主要形式有：
A B{…}和.A B{…}。如：p{ color:red; } div p{ color:yellow; } </style> <p>red text</p><!--文字是紅色的--> <div> <p>yellow text</p><!--文字是黃色的--> </div>子選擇器
指定目標選擇器處於某個選擇器內部，並且只作用於第一代，主要形式有：
A >B{…}和.A >B{…}。而包含選擇器可以作用於某標籤內的所有後代。<style> div>p{ color:red; } </style> <div> <p>red text</p><!--文字是紅色的--> <table> <tr> <td> <p>no red text;</p><!--文字是非紅色的--> </td> </tr> </table> </div>兄弟選擇器
兄弟選擇器表示A標籤匹配selector的A，B標籤匹配selector的B時，B標籤匹配樣式，格式為：
A~B{…},如：<style> div~p{ color:red; } </style> <div> <p>no red text</p><!--文字是非紅色的--> <div>no red text</div> <p>red text</p><!--文字是紅色的--> </div>即當div標籤匹配成功，p標籤匹配成功後，樣式才會成功生效在另一個p標籤上。
通用選擇器
通用選擇器用來為html中所有元素標籤設定樣式，語法形式為：
*{…},如：<!--使用html中任意標籤元素字型顏色全部設定為紅色：--> <style> *{color:red;} </style> <body> <h1>標題為紅色</h1> <p>段落也為紅色</p> </body>
使用css樣式有三種方式，分別為外鏈式、內嵌式和行內式，下面我們分別來看看具體如何引用。
外鏈式
當樣式需要應用於很多頁面時，外鏈式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個檔案來改變整個站點的外觀。每個頁面使用
<link>標籤連結到樣式表。<link>標籤在（文件的）頭部，如：<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>內嵌式
當單個文件需要特殊的樣式時，就應該使用內嵌式表。你可以使用
<style>標籤在文件頭部定義內嵌式表，就像這樣:<head> <style> p { margin-left:20px; } body { background-image:url("images/back40.gif"); } </style> </head>行內式
當樣式僅需要在一個元素上應用一次時，可以使用內聯樣式：
<p style="color:sienna;margin-left:20px">這是一個段落。</p>多重樣式
優先順序是瀏覽器是通過判斷哪些屬性值與元素最相關以決定並應用到該元素上的。優先順序僅由選擇器組成的匹配規則決定的。優先順序就是分配給指定的CSS宣告的一個權重，它由匹配的選擇器中的每一種選擇器型別的數值決定。下列是一份優先順序逐級增加的選擇器列表：
- 通用選擇器（*）
- 元素(型別)選擇器
- 類選擇器
- 屬性選擇器
- 偽類
- ID 選擇器
- 內聯樣式
注意：當 !important 規則被應用在一個樣式宣告中時,該樣式宣告會覆蓋CSS中任何其他的宣告, 無論它處在宣告列表中的哪裡. 儘管如此, !important規則還是與優先順序毫無關係.使用 !important 不是一個好習慣，因為它改變了你樣式表本來的級聯規則，從而使其難以除錯。