CSS基礎學習六：id選擇器 · Web前端HTML+CSS+JS初級入門

### 一,id選擇器示例 id選擇器允許以一種獨立于文檔元素的方式來指定樣式。在某些方面，id選擇器類似于類選擇器，不過也有一些重要差別。語法首先，id選擇器前面有一個 # 號，也稱為棋盤號或井號。請看下面的規則： ~~~ <span style="font-size:18px;">*#intro { font-size:24px; background-color:#000000; color:#FF0000;}</span> ~~~ 與類選擇器一樣，id選擇器中可以忽略通配選擇器。前面的例子也可以寫作： ~~~ <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> ~~~ 運行結果為： ![](https://box.kancloud.cn/2016-04-28_572155947a100.jpg) ### 二,id選擇器簡介 (1)概述 id選擇器可以為標有特定id的HTML元素指定特定的樣式。id 屬性只能在每個 HTML 文檔中出現一次。 id選擇器以"#"來定義。下面的兩個 id 選擇器，第一個可以定義元素的顏色為紅色，第二個定義元素的顏色為綠色： ~~~ <span style="font-size:18px;">#red {color:red;} #green {color:green;}</span> ~~~ 下面的 HTML 代碼中，id 屬性為 red 的 p 元素顯示為紅色，而 id 屬性為 green 的 p 元素顯示為綠色。 ~~~ <p id="red">這個段落是紅色。</p> <p id="green">這個段落是綠色。</p> ~~~ 運行結果為： ![](https://box.kancloud.cn/2016-04-28_572155948bdf7.jpg) (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> ~~~ 運行結果為： ![](https://box.kancloud.cn/2016-04-28_572155949c2e3.jpg) ### 五,一個選擇器，多種用法即使被標注為 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; } ~~~ 這個規則會與以下各個元素匹配(這些元素不能在同一個文檔中同時出現，因為它們都有相同的id值)： ~~~ <h1 id="mostImportant">This is important!</h1> <em id="mostImportant">This is important!</em> <ul id="mostImportant">This is important!</ul> ~~~ ![](https://box.kancloud.cn/2016-04-28_57215594af16e.jpg) 但是我在DW 8中嘗試了一下可以運行。不知道為什么？先留個疑問？補充：類選擇器和id選擇器的區別：常識： ? ? ?1.在HTML中一個標簽只能有一個id，但是可以有多個class。 ? ? ?2.一個id在一個HTML頁面中必須是唯一的，一個class可以被多個標簽元素擁有。區別： ? ? ?1.id選擇器只能應用于具體的一個標簽(注意不是一種)，類選擇器卻可以應用到多個標簽(復用) ? ? ?2.優先級不同：id選擇器大于類選擇器。什么時候用id選擇器or類選擇器一般情況下，頁面唯一不會復用的可以使用id選擇器，比如頁頭和頁腳等。如果需要復用的樣式，那么一般使用類選擇器，比如表格，列表等。一般類選擇器使用更多。