CSS選擇器：
基本可以分為通配選擇器，標簽選擇器，類選擇器，ID選擇器，簡單屬性選擇，具體屬性選擇，根據部分屬性值選擇，特定屬性選擇，從結構上來分還有后代選擇器，子元素選擇器，相鄰兄弟選擇器以及偽類。
詳細一些請見下表：
類型選擇符 E{}
屬性選擇符
E[attr]{}
E[attr=value]{}選擇具有attr屬性且屬性值等於value的E
E[attr~=value]{}選擇具有attr屬性且屬性值為用-連字符分隔的字詞列表，由value開始的E.例如
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html>
3 <head>
4 <style type="text/css">
5 p[class~="important"]
6 {
7 color: red;
8 }
9 </style>
10 </head>
11
12 <body>
13 <h1>可以應用樣式：</h1>
14 <p class="important warning">This is a paragraph.</a>
15 <p class="important">This is a paragraph.</a>
16
17 <hr />
18
19 <h1>無法應用樣式：</h1>
20 <p class="warning">This is a paragraph.</a>
21 </body>
22 </html>
除了上面的三個，還有部分請見下表
包含選擇符（又稱后代選擇符） E1 E2{}
子對象選擇符 E1>E2{}
ID選擇符 #ID{}
類選擇符 E.className{}
選擇符分組 E1,E2,E3{}
結合后代選擇器，類選擇器和子選擇器 例如：table.company td>p
上面的選擇器會選擇作為td元素子元素的所有P元素，這個td元素本身從table元素繼承，並且該table元素有一個包含company的class屬性。
相鄰兄弟選擇器 E1 + E2｛｝這里需要注意的是用一個選擇符只能選擇兩個相鄰兄弟中的第二個元素，舉個例子 li + li {font-weight:bold;}只會把第二項和第三項加粗，第一個列表項步受影響
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <style type="text/css">
5 li + li {font-weight:bold;}
6 </style>
7 </head>
8
9 <body>
10 <div>
11 <ul>
12 <li>List item 1</li>
13 <li>List item 2</li>
14 <li>List item 3</li>
15 </ul>
16 <ol>
17 <li>List item 1</li>
18 <li>List item 2</li>
19 <li>List item 3</li>
20 </ol>
21 </div>
22 </body>
23 </html>
結果為
還有一點要注意的是，顧名思義，相鄰兄弟一定要有相同的父元素。
偽類及偽對象選擇符：
偽類
偽元素
舉例如下：
<html>
<head>
<style type="text/css">
p:first-line
{
color: #ff0000;
font-variant: small-caps
}
</style>
</head>
<body>
<p>
You can use the :first-line pseudo-element to add a special effect to the first line of a text!
</p>
</body>
</html>
元素p中的內容顏色和字體就都變成了這樣
哪些可以繼承呢
可以的有 font-size font-family color
不可以的有 border padding margin background-color width height等
優先級算法計算的問題：
在多個選擇符應用於同一個元素上那么Specificity值高的最終獲得優先級。 選擇符Specificity值列表：規則： 1. 行內樣式優先級Specificity值為1,0,0,0，高於外部定義。 如：<div style=”color: red”>sjweb</div> 外部定義指經由<link>或<style>標簽定義的規則； 2.!important聲明的Specificity值最高； 3.Specificity值一樣的情況下，按CSS代碼中出現的順序決定，后者CSS樣式居上； 4.由繼續而得到的樣式沒有specificity的計算，它低於一切其他規則(比如全局選擇符*定義的規則)。 算法：當遇到多個選擇符同時出現時候 按選擇符得到的Specificity值逐位相加， {數位之間沒有進制 比如說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0} 就得到最終計算得的specificity， 然后在比較取舍時按照從左到右的順序逐位比較。
實例分析：
1.div { font-size:12px;} 分析： 1個元素{ div}，Specificity值為0,0,0,1
2.body div p{color: green;} 分析：3個元素{ body div p }，Specificity值為0,0,0,3
3.div .sjweb{ font-size:12px;} 分析： 1個元素{ div }，Specificity值為0,0,0,1 1個類選擇符{.sjweb}，Specificity值為0,0,1, 0 最終：Specificity值為 0,0,1,1
4.Div # sjweb { font-size:12px;} 分析： 1個元素{ div }，Specificity值為0,0,0,1 1個類選擇符{.sjweb}，Specificity值為0,1,0, 0 最終：Specificity值為 0,1,0,1 5.html > body div [id=”totals”] ul li > p {color:red;} 分析：
6個元素{ html body div ul li p} Specificity值為0,0,0,61個屬性選擇符{ [id=”totals”] } Specificity值為0,0,1,0 2個其他選擇符{ > > } Specificity值為0,0,0,0 最終：Specificity值為 0,0,1,6
用!important可以改變優先級別為最高，其次是style對象，然后是id > class >tag ，另外在同級樣式按照申明的順序后出現的樣式具有高優先級。