CSS存在三種Selector. 它們分別是HTML selector、class selector、ID selector，它們之間有怎樣的區別與聯系呢，這里分別介紹一下：

HTML selector

HTML selector 就是 HTML 的 tags, 比如 P, DIV, TD 等. 如你用 CSS 定義了它們, 在整頁中, 這個 Tag 的性質就按照你的定義來顯示了. HTML selector 的語法如下

tag {property:value}
比如我們想叫 H1 的顏色是紅的H1 {color: red}這里還要告訴你 CSS 的一個特點, 它可定義好幾個 selector 在一個 rule 里. 比如 H1, H2, TD {color: red}這個定義就能讓所有的 H1, H2, 和 TD 的顏色都為紅色。

Class selector

Class selector 有兩種, 一種叫相關 class selector, 它跟一個 HTML 的 tag 有關系. 它的語法是

tag.Classname {property:value}
比如我們想叫一些而不是全部 H1 的顏色是紅的 H1.redone {color: red}這樣在下面的語句中,
第一個 H1 是紅色的, 而第二個就不是了 <H1 class="redone">紅色的題目</H1><H1>普通的題目</H1>


第二種是獨立 class selector . 它可被任何 HTML tag 所應用. 它的語法如下 .
Classname {property:value}
假如我們有下面這個定義.blueone {color: blue}那么我們可以把他應用到不同的 Tag 當中去. 比如 <H1 class="blueone">藍色的題目</H1><P class="blueone">藍色的段落</P>顯然 class selector 給了我們更多的自由。

ID selector

ID selector 其實跟獨立 class selector 的功能一樣. 而區別在于它們的語法和用法不同, 以及對于 Javascript 操縱 HTML
元素有幫助. 它的語法如下

#IDname {property:value}


假如我們有下面的定義#yelowone {color: yellow}我們可以運用這個定義到任何的有同樣 ID 名字的 tag, 比如 <SPAN ID="yellowone">text here</SPAN>你可能覺得既然 ID selector 和獨立 class selector 功能一樣, 為什么兩者都存在呢. 如果你知道用 CSS-P 來定位的話, 你就明白它們的區別了. 有 ID 的 HTML 元素可以被 CSS-P和 JavaScript 來操縱。

包含選擇符

可以單獨對某種元素包含關系定義的樣式表，元素1里包含元素2，這種方式只對在元素1里的元素2定義，對單獨的元素1或元素2無定義，語法如下：

outerTag  innerTag {property:value}

樣式表的層疊性

層疊性就是繼承性，樣式表的繼承規則是外部的元素樣式會保留下來繼承給這個元素所包含的其他元素。事實上，所有在元素中嵌套的元素都會繼承外層元素指定的屬性值，有時會把很多層嵌套的樣式疊加在一起，除非另外更改。例如在DIV標記中嵌套P標記：

div { color: red; font-size:9pt}
……
<div>
<p>
這個段落的文字為紅色9號字
</p>
</div>

另外，當樣式表繼承遇到沖突時，總是以最后定義的樣式為準。

不同的選擇符定義相同的元素時，要考慮到不同的選擇符之間的優先級。
ID選擇符>類選擇符>HTML標記選擇符

如果想超越這三者之間的關系，可以用!important提升樣式表的優先權
p { color: #FF0000!important }
.blue { color: #0000FF}
#id1 { color: #FFFF00}

我們同時對頁面中的一個段落加上這三種樣式，它最后會依照被!important申明的HTML標記選擇符樣式為紅色文字。如果去掉!important，則依照優先權最高的ID選擇符為黃色文字。