CSS 選擇器（選擇符）
CSS 選擇器（選擇符）
要使用css對HTML頁面中的元素實現一對一，一對多或者多對一的控制，這就需要用到CSS選擇器。HTML頁面中的元素就是通過CSS選擇器進行控制的。
關於選擇器
每一條css樣式定義由兩部分組成，形式如下： [code] 選擇器{樣式} [/code] 在{}之前的部分就是“選擇器”。 “選擇器”指明瞭{}中的“樣式”的作用物件，也就是“樣式”作用於網頁中的哪些元素。
1.HTML標籤選擇符
一個完整的HTML頁面是有很多不同的標籤組成，而標籤選擇器，則是決定哪些標籤
採用相應的CSS樣式，(在大環境中你可能出於不同的位置，但是不管怎麼樣，你總
是穿著同一套衣服，這件衣服就是由標籤選擇器事先給你限定好的，不管走到哪裡
都是這身衣服)比如，在style.css檔案中對p標籤樣式的宣告如下：
p{
font-size:12px;
background:#900;
color:090;
}複製程式碼則頁面中所有p標籤的背景都是#900(紅色)，文字大小均是12px，顏色為#090(綠色)，這在後期維護中，如果想改變整個網站中p標籤背景的顏色，只需要修改background屬性就可以了，就這麼容易！
2.類（別）選擇符
class類選擇符匹配文件中元素E的class屬性的屬性值為classname的元素
語法：標記名.類名{屬性：值}或 .類名{屬性：值}
類選擇符名稱的定義方式是，"."英文dot,後加類名稱classname
類選擇器根據類名來選擇。前面以”.”來標誌，如：
.demoDiv{
color:#FF0000;
}在HTML中，元素可以定義一個class的屬性。
如：
<div class="demoDiv">
這個區域字型顏色為紅色
</div>
同時，我們可以再定義一個元素：
<p class="demoDiv">
這個段落字型顏色為紅色
</p>最後，用瀏覽器瀏覽，我們可以發現所有class為demoDiv的元素都應用了這個樣式。包括了頁面中的div元素和p元素。
上例我們給兩個元素(div元素和p元素)都定義了class，但如果有很多個元素都會應用這個元素，那得一個個的定義元素，就會造成頁面重複的程式碼太多，這種現象稱為
我們可以改成這樣來定義。
<div class="demoDiv">
<div>
這個區域字型顏色為紅色
</div>
同時，我們可以再定義一個元素：
<p>
這個段落字型顏色為紅色
</p>
</div>這樣，我們就只是定義了一個類，同時把樣式應用到了所有的元素當中。
程式碼示例：
採用外部式樣表。首先建立一個css檔案，命名為 selectclass.css，新增下面的程式碼：
.demoDiv{
color:#00FF00;
background:red;
font-size:50px;
}說明：selectclass.css 存放在資料夾 CSS test 中
再建立一個html檔案，命名為 selectclass.html ，它和資料夾 CSS test位於相同的目錄。向selectclass.html中新增下面的程式碼：
<html>
<head>
<!--連結在當前目錄資料夾CSS test下的selectclass.css檔案-->
<link rel="stylesheet" type="text/css" href="./CSS test/selectclass.css" />
<style>
hr{width:500px;}
p{color:bule}
p.dark{background:#0000ff;font-size:30px;}
</style>
</head>
<body>
<div class="demoDiv">
這個區域字型顏色為紅色
<p>222222222222222</p>
<p style="color:blue;font-size:10px;">111111111111111111</p>
</div>
<p class="demoDiv">
這個段落字型顏色為紅色
</p>
<hr>
<p style="color:green;font-size:50px;">111111111111111111</p>
<p>222222222222222</p>
<p>333333333333333</p>
</hr>
<p class="dark">line111111111111</p>
<p>line22222222222222</p>
</body>
</html>執行結果示意圖：
圖2-1 class選擇符頁面示意圖
注：這裡可以順便總結一下樣式表的優先順序：“就近原則”，這個可以對照示例程式碼自己去理解。
3.ID選擇符
根據元素ID來選擇元素，具有唯一性。
前面以”#”號來標誌，在樣式裡面可以這樣定義：
#demoDiv{
color:#FF0000;
}
這裡代表id為demoDiv的元素的設定它的字型顏色為紅色。
我們在頁面上定義一個元素把它的ID定義為demoDiv，如：
<div id="demoDiv">
這個區域字型顏色為紅色
</div>
用瀏覽器瀏覽，我們可以看到因為區域內的顏色變成了紅色
再定義一個區域
<div>
這個區域沒有定義顏色
</div>
用瀏覽器瀏覽，與預期的一樣，區域沒有應用樣式，所以區域中的字型顏色還是預設的顏色黑色。
示例：
新建一個html檔案，命名為：selectid.html 。新增下面的程式碼：
<html>
<head>
<style>
#light{
background:#ff0000;font-size:50px;color:blue;
}
</style>
</head>
<body>
<p id="light">這個段落字型顏色為紅色</p>
<p>這個段落沒有新增樣式 line22222222222222</p>
</body>
</html>執行後，頁面效果如圖3-1所示：
圖3-2 ID選擇符頁面示意圖
4.其他選擇符
CSS選擇器還有其他的型別，暫時只學習這3種最基本的型別，其他的後續用到時再做理會。
總結
•html標籤選擇符,比如 p標籤選擇符(代表所有的段落都使用這個CSS樣式),比如 p{font-size:12px;}
•id選擇符,唯一性選擇符,比如 #dreamdured{color:red;},就是在名字前增加了一個#,id選擇符在一個頁面中只能出現一次,在整個網站中也最好出現一次(這樣有利於程式設計師控制此元素,有多個一樣名稱的元素,就無法分開不好控制了).
•class選擇符,多重選擇符,比如.dreamdublue{color:blue;},就是在名字前增加了一個.,class選擇符在一個頁面中可以出現多次(注意下面的示例中class選擇符的用法).
id與class選擇符在CSS與HTML中的用法總結
CSS中的寫法 XHTML中的寫法
xhtml標籤選擇符 p{font-size:12px;} <p>www.dreamdu.com</p>
id選擇符 #id_selector{font-size:12px;} <p id="id_selector">CSS學習</p>
class選擇符 .class_selector{font-size:12px;} <p class="class_selector">CSS學習</p>
5.css選擇器的的繼承
選擇器的分組：你可以對選擇器進行分組，這樣，被分組的選擇器就可以分享相同的宣告。用逗號將需要分組的選擇器分開。
例如：h1,h2,h2,h3,h5,h6 {
color: green;
}