CSS id 選擇器

id 選擇器

id 選擇器能夠爲標有特定 id 的 HTML 元素指定特定的樣式。

id 選擇器以 "#" 來定義。

下面的兩個 id 選擇器，第一個能夠定義元素的顏色爲紅色，第二個定義元素的顏色爲綠色：

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

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

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

注意：id 屬性只能在每一個 HTML 文檔中出現一次。想知道緣由嗎，請參閱 XHTML:網站重構。

id 選擇器和派生選擇器

在現代佈局中，id 選擇器經常用於創建派生選擇器。

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

上面的樣式只會應用於出如今 id 是 sidebar 的元素內的段落。這個元素極可能是 div 或者是表格單元，儘管它也多是一個表格或者其餘塊級元素。它甚至能夠是一個內聯元素，好比 <em></em> 或者 <span></span>，不過這樣的用法是非法的，由於不能夠在內聯元素 <span> 中嵌入 <p> （若是你忘記了緣由，請參閱 XHTML:網站重構）。

一個選擇器，多種用法

即便被標註爲 sidebar 的元素只能在文檔中出現一次，這個 id 選擇器做爲派生選擇器也能夠被使用不少次：

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

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

在這裏，與頁面中的其餘 p 元素明顯不一樣的是，sidebar 內的 p 元素獲得了特殊的處理，同時，與頁面中其餘全部 h2 元素明顯不一樣的是，sidebar 中的 h2 元素也獲得了不一樣的特殊處理。

單獨的選擇器

id 選擇器即便不被用來建立派生選擇器，它也能夠獨立發揮做用：

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

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

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

CSS ID 選擇器詳解

• CSS 類選擇器詳解
• CSS 屬性選擇器詳解

ID 選擇器容許以一種獨立於文檔元素的方式來指定樣式。

CSS ID 選擇器

在某些方面，ID 選擇器相似於類選擇器，不過也有一些重要差異。

語法

首先，ID 選擇器前面有一個 # 號 - 也稱爲棋盤號或井號。

請看下面的規則：

*#intro {font-weight:bold;}

與類選擇器同樣，ID 選擇器中能夠忽略通配選擇器。前面的例子也能夠寫做：

#intro {font-weight:bold;}

這個選擇器的效果將是同樣的。

第二個區別是 ID 選擇器不引用 class 屬性的值，毫無疑問，它要引用 id 屬性中的值。

如下是一個實際 ID 選擇器的例子：

<p id="intro">This is a paragraph of introduction.</p>

親自試一試

類選擇器仍是 ID 選擇器？

在類選擇器這一章中咱們曾講解過，能夠爲任意多個元素指定類。前一章中類名 important 被應用到 p 和 h1 元素，並且它還能夠應用到更多元素。

區別 1：只能在文檔中使用一次

與類不一樣，在一個 HTML 文檔中，ID 選擇器會使用一次，並且僅一次。

區別 2：不能使用 ID 詞列表

不一樣於類選擇器，ID 選擇器不能結合使用，由於 ID 屬性不容許有以空格分隔的詞列表。

區別 3：ID 能包含更多含義

相似於類，能夠獨立於元素來選擇 ID。有些狀況下，您知道文檔中會出現某個特定 ID 值，可是並不知道它會出如今哪一個元素上，因此您想聲明獨立的 ID 選擇器。例如，您可能知道在一個給定的文檔中會有一個 ID 值爲 mostImportant 的元素。您不知道這個最重要的東西是一個段落、一個短語、一個列表項仍是一個小節標題。您只知道每一個文檔都會有這麼一個最重要的內容，它可能在任何元素中，並且只能出現一個。在這種狀況下，能夠編寫以下規則：

#mostImportant {color:red; background:yellow;}

這個規則會與如下各個元素匹配（這些元素不能在同一個文檔中同時出現，由於它們都有相同的 ID 值）：

<h1 id="mostImportant">This is important!</h1>
<em id="mostImportant">This is important!</em> <ul id="mostImportant">This is important!</ul> 

親自試一試：

• 爲 id 爲 mostImportant 的 h1 元素設定樣式
• 爲 id 爲 mostImportant 的 em 元素設定樣式
• 爲 id 爲 mostImportant 的 ul 元素設定樣式

區分大小寫

請注意，類選擇器和 ID 選擇器多是區分大小寫的。這取決於文檔的語言。HTML 和 XHTML 將類和 ID 值定義爲區分大小寫，因此類和 ID 值的大小寫必須與文檔中的相應值匹配。

所以，對於如下的 CSS 和 HTML，元素不會變成粗體：

#intro {font-weight:bold;}

<p id="Intro">This is a paragraph of introduction.</p>

因爲字母 i 的大小寫不一樣，因此選擇器不會匹配上面的元素。