Design Code 設計密碼

id 選擇器可以為標有特定id 的HTML 元素指定特定的樣式。

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

下面的兩個id 選擇器，第一個可以定義元素的顏色為紅色，第二個定義元素的顏色為綠色：

<code>#red</code> {color:red;}
<code>#green</code> {color:green;}
	

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

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

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

id 選擇器和派生選擇器

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

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

上面的樣式只會應用於出現在id是sidebar的元素內的段落。這個元素很可能是div或者是表格單元，

儘管它也可能是一個表格或者其他塊級元素。

它甚至可以是一個內聯元素，比如<em></em>或者<span></span>，不過這樣的用法是非法的，

因為不可以在內聯元素<span>中嵌入<p>

一個選擇器，多種用法

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

<code>#sidebar p</code> {
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
    }
<code>#sidebar h2</code> {
    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 選擇器即使不被用來創建派生選擇器，它也可以獨立發揮作用：

<code>#sidebar</code> {
    border: 1px dotted #000;
    padding: 10px;
    }
	

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

<code>div#sidebar</code> {
    border: 1px dotted #000;
    padding: 10px;
    }