CSS的一點筆記選擇器基本概念

本文所有例子均摘自 www.w3school.org

css是為了能夠防止對html元素進行重複定義。比如說，我們希望所有的標題都是黑色粗體，那麼只需要統一定義「黑色粗體」的型別叫做a，然後指定所有的標題的「型別」都是a，就達到了目的。這樣**量較小。同時也可以統一進行修改。

有以下幾種情況可能會導致重複定義：

1. 不同html元素具有相同的屬性比如指定、文字居中等。

2. 在不同頁面中用到的某些特定的html 元素

3. 某些具有相對位置的元素。比如在某 div 下的 ol, li 應該是怎樣的

對於第一種情況，一般是使用類選擇器，也就是制定一類xx 元素是xx樣子的。定義方式是 .***

舉例：

.center

this paragraph will also be center-aligned.

注意到這裡 p 和 h1 是不同的元素，但是可以使用相同的類選擇器。也就是說，類選擇器可以被不同的屬性繼承。

第二種情況下，需要指定某頁面中某個特定元素的形式，比如指定logo的擺放形式的。因為是特定元素，因此需要用id選擇器。id 選擇器可以為標有特定 id 的 html 元素指定特定的樣式。id 選擇器以 "#" 來定義。

#red

這個段落是紅色。

id選擇器在乙個文件中只能用一次。

如果希望指定某些元素在特定位置時表現的情況不一樣，則可以使用派生選擇器。

li strong

這個例子指定了在li元素下的strong會是何種情況。這種情況與只定義 strong{} 不同。

事實情況可能較為複雜。

比如說，某種元素，比如li，分為兩類，一類是使用者列表，一類是書籍列表，這種情況下如果只用類選擇器，容易與其他元素混淆。這時的定義方式是：

td.fancy

上面的例子中，類名為 fancy 的**單元將是帶有灰色背景的橙色。

比如說，若我們希望指定標定為「a類」的所有元素的下級元素都符合某種標準，則可以將類選擇器和派生選擇器結合使用，如

.fancy td

這個說明了，如果乙個元素（比如 div， table）的類為 fancy，那麼其中的td 必須滿足上述定義。

同樣的，id選擇器也可以和派生選擇器一起用（很煩人是不是。。。），比如說

#sidebar p

意思是說，如果有乙個元素的id是 sidebar （不管它是div，table還是ol），那麼它下面的p 就必須按照上面的形式。

id選擇器一般不單獨使用（老版本的ie不支援）。解決辦法是明確寫明該id選擇器用於何種元素，比如

div#sidebar 說明sidebar 只能用於div。

整個css最複雜的就是這幾個破概念，搞明白了其他就容易理解了。是否真有必要設計這麼麻煩呢？

CSS的一點筆記 選擇器 基本概念