[CSS]層疊樣式表中的四種基礎選取器的使用教程

一、派生選取器
通過依據元素在其位置的上下文關係來定義樣式，你可以使標記更加簡潔。
在 CSS1 中，通過這種方式來應用規則的選取器被稱為上下文選取器 (contextual selectors)，這是由於它們依賴於上下文關係來應用或者避免某項規則。在 CSS2 中，它們稱為派生選取器，但是無論你如何稱呼它們，它們的作用都是相同的。
派生選取器允許你根據文檔的上下文關係來確定某個標籤的樣式。通過合理地使用派生選取器，我們可以使 HTML 程式碼變得更加整潔。
比方說，你希望列表中的 strong 元素變為斜體字，而不是通常的粗體字，可以這樣定義一個派生選取器：

li strong {    font-style: italic;    font-weight: normal;  }

<p><strong>我是粗體字，不是斜體字，因為我不在列表當中，所以這個規則對我不起作用</strong></p><ol><li><strong>我是斜體字。這是因為 strong 元素位於 li 元素內。</strong></li><li>我是正常的字型。</li></ol>

在上面的例子中，只有 li 元素中的 strong 元素的樣式為斜體字，無需為 strong 元素定義特別的 class 或 id，代碼更加簡潔。

再看看下面的 CSS 規則：

strong {     color: red;     }h2 {     color: red;     }h2 strong {     color: blue;     }

下面是它施加影響的 HTML：

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p><h2>This subhead is also red.</h2><h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

二、id 選取器
id 選取器可以為標有特定 id 的 HTML 元素指定特定的樣式。
id 選取器以 "#" 來定義。
下面的兩個 id 選取器，第一個可以定義元素的顏色為紅色，第二個定義元素的顏色為綠色：

#red {color:red;}#green {color:green;}

下面的 HTML 程式碼中，id 屬性為 red 的 p 元素顯示為紅色，而 id 屬性為 green 的 p 元素顯示為綠色。

<p id="red">這個段落是紅色。</p><p id="green">這個段落是綠色。</p>

注意：id 屬性只能在每個 HTML 文檔中出現一次。

id 選取器和派生選取器

在現代布局中，id 選取器常常用於建立派生選取器。

#sidebar p {    font-style: italic;    text-align: right;    margin-top: 0.5em;    }

上面的樣式只會應用於出現在 id 是 sidebar 的元素內的段落。這個元素很可能是 div 或者是表格單元，儘管它也可能是一個表格或者其他區塊層級元素。它甚至可以是一個內嵌元素，比如 <em></em> 或者 <span></span>，不過這樣的用法是非法的，因為不可以在內嵌元素 <span> 中嵌入 <p> （如果你忘記了原因，請參閱 XHTML:網站重構）。
一個選取器，多種用法

即使被標註為 sidebar 的元素只能在文檔中出現一次，這個 id 選取器作為派生選取器也可以被使用很多次：

#sidebar p {    font-style: italic;    text-align: right;    margin-top: 0.5em;    }#sidebar h2 {    font-size: 1em;    font-weight: normal;    font-style: italic;    margin: 0;    line-height: 1.5;    text-align: right;    }

在這裡，與頁面中的其他 p 元素明顯不同的是，sidebar 內的 p 元素得到了特殊的處理，同時，與頁面中其他所有 h2 元素明顯不同的是，sidebar 中的 h2 元素也得到了不同的特殊處理。

單獨的選取器
id 選取器即使不被用來建立派生選取器，它也可以獨立發揮作用：

#sidebar {    border: 1px dotted #000;    padding: 10px;    }

根據這條規則，id 為 sidebar 的元素將擁有一個像素寬的黑色點狀邊框，同時其周圍會有 10 個像素寬的內邊距（padding，內部空白）。老版本的 Windows/IE 瀏覽器可能會忽略這條規則，除非你特別地定義這個選取器所屬的元素：

div#sidebar {    border: 1px dotted #000;    padding: 10px;    }

三、類別選取器

在 CSS 中，類別選取器以一個點號顯示：

.center {text-align: center}

在上面的例子中，所有擁有 center 類的 HTML 元素均為置中。
在下面的 HTML 程式碼中，h1 和 p 元素都有 center 類。這意味著兩者都將遵守 ".center" 選取器中的規則。

<h1 class="center">This heading will be center-aligned</h1><p class="center">This paragraph will also be center-aligned.</p>

注意：類名的第一個字元不能使用數字！它無法在 Mozilla 或 Firefox 中起作用。
和 id 一樣，class 也可被用作派生選取器：

.fancy td {    color: #f60;    background: #666;    }

在上面這個例子中，類名為 fancy 的更大的元素內部的表格單元都會以灰色背景顯示橙色文字。（名為 fancy 的更大的元素可能是一個表格或者一個 div）

元素也可以基於它們的類而被選擇：

td.fancy {    color: #f60;    background: #666;    }

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

<td class="fancy">

你可以將類 fancy 分配給任何一個表格元素任意多的次數。那些以 fancy 標註的儲存格都會是帶有灰色背景的橙色。那些沒有被分配名為 fancy 的類的儲存格不會受這條規則的影響。還有一點值得注意，class 為 fancy 的段落也不會是帶有灰色背景的橙色，當然，任何其他被標註為 fancy 的元素也不會受這條規則的影響。這都是由於我們書寫這條規則的方式，這個效果被限制於被標註為 fancy 的表格單元（即使用 td 元素來選擇 fancy 類）。

四、屬性選取器
對帶有指定屬性的 HTML 元素設定樣式。
可以為擁有指定屬性的 HTML 元素設定樣式，而不僅限於 class 和 id 屬性。
注釋：Internet Explorer 7 （以及更高版本）在規定了 !DOCTYPE 的情況下支援屬性選取器。IE6 及更低的版本不支援屬性選取器。
下面的例子為帶有 title 屬性的所有元素設定樣式：

[title]{color:red;}

屬性和值選取器

下面的例子為 title="WHY" 的所有元素設定樣式：

[title=WHY]{border:5px solid blue;}

屬性和值選取器 - 多個值

下面的例子為包含指定值的 title 屬性的所有元素設定樣式。適用於由空格分隔的屬性值：

[title~=hello] { color:red; }

下面的例子為帶有包含指定值的 lang 屬性的所有元素設定樣式。適用於由連字號分隔的屬性值：

[lang|=en] { color:red; }

設定表單的樣式
屬性選取器在為不帶有 class 或 id 的表單設定樣式時特別有用：

input[type="text"]{  width:150px;  display:block;  margin-bottom:10px;  background-color:yellow;  font-family: Verdana, Arial;}input[type="button"]{  width:120px;  margin-left:35px;  display:block;  font-family: Verdana, Arial;}