CSS基礎學習六：id選擇器
id選擇器允許以一種獨立於文件元素的方式來指定樣式。在某些方面，id選擇器類似於類選擇器，不過也有一些
重要差別。
語法
首先，id選擇器前面有一個 # 號，也稱為棋盤號或井號。請看下面的規則：
<span style="font-size:18px;">*#intro { font-size:24px;
background-color:#000000;
color:#FF0000;}</span><span style="font-size:18px;">#intro { font-size:24px; background-color:#000000; color:#FF0000;} </span>
這個選擇器的效果將是一樣的。
第二個區別是id選擇器不引用 class 屬性的值，毫無疑問，它要引用 id 屬性中的值。
以下是一個實際id選擇器的例子：
<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文件</title> <style type="text/css"> #intro { font-size:24px; background-color:#000000; color:#FF0000;} </style> </head> <body> <p id="intro">This is a paragraph of introduction.</p> <p>This is a paragraph of introduction.</p> </body> </html></span>
執行結果為：
二id選擇器簡介
(1)概述
id選擇器可以為標有特定id的HTML元素指定特定的樣式。id 屬性只能在每個 HTML 文件中出現一次。
id選擇器以"#"來定義。
下面的兩個 id 選擇器，第一個可以定義元素的顏色為紅色，第二個定義元素的顏色為綠色：
<span style="font-size:18px;">#red {color:red;}
#green {color:green;}</span><p id="red">這個段落是紅色。</p>
<p id="green">這個段落是綠色。</p>執行結果為：
(2)區分大小寫
請注意，類選擇器和id選擇器可能是區分大小寫的。這取決於文件的語言。HTML 和 XHTML 將類和id值定義為
區分大小寫，所以類和id值的大小寫必須與文件中的相應值匹配。
因此，對於以下的 CSS 和 HTML，元素不會變成粗體：#intro {font-weight:bold;}
<p id="Intro">This is a paragraph of introduction.</p>
由於字母 i 的大小寫不同，所以選擇器不會匹配上面的元素，執行不會有你想要的結果。
三單獨的選擇器
id 選擇器即使不被用來建立派生選擇器，它也可以獨立發揮作用：#sidebar {
border: 1px dotted #000;
padding: 10px;
}根據這條規則，id 為 sidebar 的元素將擁有一個畫素寬的黑色點狀邊框，同時其周圍會有 10 個畫素寬的內邊距
(padding，內部空白)。老版本的 IE 瀏覽器可能會忽略這條規則，除非你特別地定義這個選擇器所屬的元素：
div#sidebar {
border: 1px dotted #000;
padding: 10px;
}四id選擇器和派生選擇器
在現代佈局中id選擇器常常用於建立派生選擇器。#sidebar p {
font-style: italic;
text-align: left;
margin-top: 0.5em;
}上面的樣式只會應用於出現在 id 是 sidebar 的元素內的段落。這個元素很可能是 div 或者是表格單元，儘管它也
可能是一個表格或者其他塊級元素。它甚至可以是一個內聯元素，比如 <em></em> 或者 <span></span>，不過這樣
的用法是非法的，因為不可以在內聯元素 <span> 中嵌入 <p>。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文件</title>
<style type="text/css">
#sidebar p {
font-style: italic;
text-align: left;
margin-top: 0.5em;
}
</style>
</head>
<body>
<div id="sidebar">
<p> 這是div區域的段落</p>
</div>
<div id="sidebar">
這是div區域2
</div>
<p id="sidebar">這是段落2</p>
</body>
</html>
五一個選擇器，多種用法
即使被標註為 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選擇器？
在類選擇器這一篇部落格中我們曾講解過，可以為任意多個元素指定類。前一章中類名 important 被應用到 p 和 h1
元素，而且它還可以應用到更多元素。
區別 1：只能在文件中使用一次
與類不同，在一個 HTML 文件中，id選擇器會使用一次，而且僅一次。
區別 2：不能使用id詞列表
不同於類選擇器，id選擇器不能結合使用，因為id屬性不允許有以空格分隔的詞列表。
區別 3：id能包含更多含義
類似於類，可以獨立於元素來選擇id。有些情況下，您知道文件中會出現某個特定id值，但是並不知道它會出現
在哪個元素上，所以您想宣告獨立的id選擇器。例如，您可能知道在一個給定的文件中會有一個id值為 mostImportant
的元素。您不知道這個最重要的東西是一個段落、一個短語、一個列表項還是一個小節標題。您只知道每個文件都會
有這麼一個最重要的內容，它可能在任何元素中，而且只能出現一個。在這種情況下，可以編寫如下規則：
#mostImportant {color:red;
background:yellow;
}<h1 id="mostImportant">This is important!</h1>
<em id="mostImportant">This is important!</em>
<ul id="mostImportant">This is important!</ul>
但是我在DW 8中嘗試了一下可以執行。不知道為什麼？先留個疑問？
補充：類選擇器和id選擇器的區別：
常識：
1在HTML中一個標籤只能有一個id，但是可以有多個class。
2一個id在一個HTML頁面中必須是唯一的，一個class可以被多個標籤元素擁有。
區別：
1id選擇器只能應用於具體的一個標籤(注意不是一種)，類選擇器卻可以應用到多個標籤(複用)
2優先順序不同：id選擇器大於類選擇器。
什麼時候用id選擇器or類選擇器
一般情況下，頁面唯一不會複用的可以使用id選擇器，比如頁頭和頁尾等。如果需要複用的樣式，那麼一般使用
類選擇器，比如表格，列表等。
一般類選擇器使用更多。