凡是 CSS 樣式定義都具備兩種元素：1. 選取器（Selector）2. 屬性（Property）。你可以想像一下 Name-Value Pair 結構，如果 Value 是 Property，那麼 Name 就是 Selector 了。若用白話來說，「選取器」就是「屬性」的索引。 我想屬性的部份在這裡就不多做介紹了；我將主要解說選取器的類別和用法...
凡是 CSS 樣式定義都具備兩種元素：
- 選取器（Selector）
- 屬性（Property）
你可以想像一下 Name-Value Pair 結構，如果 Value 是 Property，那麼 Name 就是 Selector 了。若用白話來說，「選取器」就是「屬性」的索引。 我想屬性的部份在這裡就不多做介紹了；我將主要解說選取器的類別和用法。
由於 HTML 標籤有許多不同的變化和狀態，所以選取器也必須具備不同的描述方法，才能適用不同的情況。以下分類說明之：
標籤選取器（Tag Selector）
這是最簡單的 Selector；列舉 HTML 的標籤並予以定義，然後這些 HTML 標籤就會自動套用該樣式。如下例：
p, div {
font-family: Verdana, Arial;
font-size: 0.8em;
color: black;
}
定義之後，凡是文件內的 <p> 和 <div> 內含的所有元素就會全部自動套用該樣式。你可以試試定義 body 標籤的樣式；你將會發現文件內所有元素都會全部套用你所定義的樣式。
類別選取器（Class Selector）
在上面的標籤選取器中，你如果定義了 HTML 標籤的樣式，所有該標籤之下的元素都會自動套用該樣式。但是如果你不希望文件內全部的標籤都長得一樣，而是希望稍為不同，該怎麼做呢？
類別選取器所定義的樣式不是任何一個 HTML 標籤，而是由你自行決定的任意元素。請看以下的例子：
.topLine {
font-family: Verdana; Arial;
font-size: 1.6em;
font-weight: bold;
}
以句點開頭的選取器就叫做類別選取器，你可以將它用在任何 HTML 元素中，如下例：
<p class="topLine">這段文字套用 .topLine 類別樣式</p>
如果你要限定定義的類別只能使用在某種 HTML 標籤的話，你可以使用以下方法宣告：
div.topLine {
font-family: Verdana; Arial;
font-size: 1.6em;
font-weight: bold;
}
以這種方式宣告的話，那麼只有 div 元素才能套用 topLine 類別。
擬態類別選取器（Pseudo-Class Selector）
像 a 這種 HTML 元素，本身有不同的狀態，你可以使用擬態類別選取器來定義它們：
a:link { color: blue; }
a:visited { color: grey; }
a:hover { color: red; }
a:active { color: green; }
值得注意的是，擬態類別選取器也可以跟類別選取器組合在一起，例如以下的例子：
a.topLine:link { color: yellow; }
若如此定義，那麼只有指定類別為 topLine 的 a 元素才會套用以上的樣式：
<a class=topLine href=... />
在 Netscape 6.0 以上的版本還支援 a:focus 這種 Selector，意指當 a 元素被 focus 時的樣式。不過由於 IE 完全不支援，所以不建議使用。
除了上述的例子之外，事實上還有幾個幾乎沒人使用的擬態類別選擇器，以範例說明之：
DIV:first-line { background-color: lightblue; }
H1:first-letter { font-size:x-large; }
這兩個選擇器並不限制套用的 HTML 元素。其中 first-line 只對第一行文字有作用，first-letter 則是只對第一個文字有作用。此外還有 :before (作用於元素所在的位置之前) 和 :after (作用於元素所在的位置之後) 兩種，由於 IE 都不支援，所以都不建議使用。
關聯選取器（Contextual Selector）
這個選取器可以說是專門針對 Container 類型的 HTML 元素（例如 p, div 等等）而設計的。它主要的目的，就是在已定義一個類別選取器的情況之下，再指定套用至該類別的子元件（Child）的樣式，宣告的方式為「Parent Child」(中間有一個空白字元)。我們來看以下的例子，就會明白了：
.topLine { background-color: blue; }
p.topLine a:visited { color: blue; }
p.topLine a:link { color: white; }
在這裡，我們先使用類別選取器定義了 topLine 這個樣式類別，它定義背景色為藍色。接著，我們定義了 p.topLine 元素的關聯選取器。請注意其宣告方法，在 p.topLine 和 a:visited 中間是以空白間隔的。
要如此定義的目的，主要是讓套用 .topLine 樣式類別的 p 元素（已設定背景色為藍色），其下如果有 a 元素時，若其狀態是 visited，那麼它的文字也會變成藍色。如此一來，由於前景色和背景色一樣，它的文字就會變成看不見了。
當然，這裡只是當作一個解說的例子而已。如果你的主要目的是要讓文字看不見，使用 transparent 作為文字的顏色可能是更容易的做法。
之所以叫做關聯選取器，是因為（如上範例）只有當 a 元素出現在套用 topLine 類別的 p 元素中時，那個樣式才會被套用。由於中間必須有關聯，所以叫做關聯選取器。
除了上面提到的「Parent Child」的宣告方式之外，你可能偶爾也會看到類似「Parent>Child」、「Parent+Child」和「Parent[Child]」等等不以空白字元，而是使用不同符號作為間隔符號的宣告方式。它們也是一種關聯選擇器，不過 IE 並不支援這種宣告，Netscape 雖然支援，卻有問題，所以建議大家不要使用。
ID 選取器（ID Selector）
在樣式定義中直接指定所套用元素的 ID，因此將只有該元素才能套用樣式。如下例：
#topLine1 { color: white; }
...
<p id=topLine1>這一段樣式已被單獨指定</p>
這種選取器是最少被使用的，因為你根本可以直接在該元素中以 style=... 的方式指定其樣式。不過把它寫在樣式表檔案有時有它方便的地方，主要是在進行管理時會方便些。
或許你也會看到有人使用如下的宣告方式：
div#topLine1 { color: white; }
...
<div id=topLine1>這一段樣式已被單獨指定</div>
其原意是限定只有 div 元素中 id 為 topLine1 的子元素可以套用這個樣式。不過既然已經知道 ID 了, 再限定它必須出現在何種元素裡面, 意義恐怕就不是太大了。
