CSS2.1 選取器(Selector)
語法的基本規則結構
在每個規則結構之中都包含有兩個部份，第一個部分是選取器，用來決定那些已命名的標籤名稱或者我們自訂的名稱會受到樣式影響。
第二個部分則是樣式宣告，由一組或多組屬性樣式：樣式值來指定選取器的動作，也就是 { 與 } 所括起來的部份。倘若選擇器之中，有一個以上的屬性樣式，記得在每組之間用分號「;」隔開彼此。像這樣每組之間使用分號來「串接」的方式也就是其 CSS 名稱的由來。※如果只有一組樣式的話是不用分號的，不過為了好習慣還是建議寫上。
選取器(Selector)
通常選取器的選擇，我們都是使用 HTML 標籤的名稱來作為我們的選取器，例如 div 或 p 等等的標籤名。
div {border: 1px solid red;}
p {color: blue;}
不過這樣的表現方式常會有問題產生，例如上述之中所表示的是：所有的 div 標籤均有 1px 寬度的紅色框線，所有的 p 標籤，其文字顏色(前景顏色)為藍色；除非您真的打算這麼做。
若是只有少數的標籤需套用到樣式，您可以為此標籤加上識別選取器(id)或類型選取器(class)；若是其它的標籤不會用到的話，也可以直接在標籤之中插入 style 屬性來設置樣式。
div#Layout {border: 1px solid red;}
p.myColor {color: blue;}
識別選取器(id)與類型選取器(class)
id 與 class 是我們在 HTML 的標籤中，用來呼叫使用我們自訂名稱所設定的 CSS 樣式。例如：
<div id="myStyle">內容</div>
在上述例子裡，我們在 <div> 中置了一個 id="myStyle"，其所代表的意義為——在該標籤中呼叫了一個我們自訂識別選取器為 myStyle 的選取器，所以在這個 <div>…</div> 標籤對中的內容就會依照這個選取器所設定的樣式屬性與屬性值來呈現。
識別選取器(id)
#id名稱 {樣式屬性: 樣式值;}
只要在標籤中加上 id="您自訂的名稱"，也就是識別選取器名稱，這樣便可呼叫使用。若是前頭不加 HTML 的標籤名，則表示它可以套用在任何的標籤上(不限定)。※不要忘記名稱前頭的 # 字號。
標籤名稱#id名稱 {樣式屬性: 樣式值;}
有些樣式並非每種標籤都適用或者您只想限定在某標籤上來使用樣式，這時上述的格式就是用來限定標籤可以使用的識別選取器。例如：table#myStyle，則是表示 #myStyle 這個識別選取器只能用在 table 標籤中。
※注意：若未加上限定的標籤則表示所有的標籤皆可使用，不過這有賴於當中的樣式屬性是否適用於該標籤。
類型選取器(class)
.class名稱 {樣式屬性: 樣式值;}
只要在標籤中加上 class="您自訂的名稱"，也就是類型選取器名稱，這樣便可呼叫使用。若是前頭不加 HTML 的標籤名，則表示它可以套用在任何的標籤上(不限定)。※不要忘記名稱前頭的 . 句點。
標籤名稱.class名稱 {樣式屬性: 樣式值;}
有些樣式並非每種標籤都適用或者您只想限定在某標籤上來使用樣式，這時上述的格式就是用來限定標籤可以使用的識別選取器。例如：table.myStyle，則是表示 .myStyle 這個類型選取器只能用在 table 標籤中。
※注意：若未加上限定的標籤則表示所有的標籤皆可使用，不過這有賴於當中的樣式屬性是否適用於該標籤。
class 與 id 的不同處
同樣一個 class 適合於好幾個不同標籤來使用，不過 id 確只能適用於單一標籤，在 XHTML 標準中更是嚴格。其實使用這兩個定義也不用去想那麼多，在「標準網頁」中只要記住一個大原則就可以了，那就是在「同一份」網頁中，其相同 id 的名稱只能出現一次，只要記住這點的話，那就差不多不會出錯了。
選取器的組合
單一選取器
例如：
.MyStyle {
background-color: black;
font-family: courier, monospace;
color: #0000ff;
}
複數選取器
使用逗號來區隔多個選取器，例如：
h1, td, select {
font: 20px italic small-caps bold;
background-color: #ffffff;
color: #000000;
}
選取器的類型
標籤選取器
例如：
h1 {color: red;}
識別選取器
例如：
h1#myTitle {color: red;}
類型選取器
例如：
h1.myTitle {color: red;}
後代選取器
例如在下方的例子中，只有當 b 選取器的父元素為 p 並且其親代元素為 div 時，b 選取器才有作用。
div p b {color: #ff0000;}
全域選取器
例如在下方的例子中，* 號指的是讓所有元素的前景顏色變為紅色。
* {color: #ff0000;}
子代選取器
例如在下方的例子中，第一層的 div 為父元素，所以只有它第一代的 p 元素會受影響變為紅色。也就是說選取任何為 div#myStyle 子代的 p 元素。
div#myStyle>p {color: red;}
p {color: blue;}
<div id="myStyle"> <p>第一代</p> <p>第一代</p> <div><p>第二代</p></div> <div><p>第二代</p></div> <p>第一代</p> </div>
兄弟選取器
例如在下方的例子中，當緊接在 h1 之後並且與 h1 屬於同一個親代的 p 元素，其字型為粗體。
h1 + p {font-weight: bold;}
