類選擇器和ID選擇器
阿新 • • 發佈：2018-12-26
什麼是選擇器？
每一條css樣式宣告（定義）由兩部分組成，形式如下：
選擇器{樣式;}
在{}之前的部分就是“選擇器”，“選擇器”指明瞭{}中的“樣式”的作用物件，也就是“樣式”作用於網頁中的哪些元素。類選擇器
類選擇器在css樣式編碼中是最常用到的，格式如下：
.類選擇器名稱{css樣式程式碼}
注意:
1.英文圓點開頭；
2.類選擇器名稱可以任意起名（但是不能用中文）
使用方法：
1.使用合適的標籤把要修飾的內容標記起來，如下：
<span>Kity_Pei</span>3.設定類選擇器css樣式<span class="name">Kity_Pei</span>
.name{color:red;}Demo程式碼
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>認識html標籤</title>
<style type="text/css">
.stress{color:red;}
.setGreen{color:green;}
</style>
</head>
<body>
<h1>勇氣</h1>
<p>三年級時，我還是一個<span class="stress">膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個<span class="stress">勇氣</span>來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
<p>到了三年級下學期時，我們班上了一節<span class="setGreen">公開課</span>，老師提出了一個很簡單的問題，班裡很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。</p>
<img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
</body>
</html> ID選擇器
ID選擇器在css樣式編碼中是最常用到的，格式如下：
#ID選擇器名稱{css樣式程式碼}
注意:
1.以符號"#"開頭；
2.ID選擇器名稱可以任意起名（但是不能用中文）
使用方法：
1.使用合適的標籤把要修飾的內容標記起來，如下：
<span>Kity_Pei</span><span id="name">Kity_Pei</span>#name{color:red;}<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>認識html標籤</title>
<style type="text/css">
#stress{color:red;}
#setGreen{color:green;}
</style>
</head>
<body>
<h1>勇氣</h1>
<p>三年級時，我還是一個<span id="stress">膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
<p>到了三年級下學期時，我們班上了一節<span id="setGreen">公開課</span>，老師提出了一個很簡單的問題，班裡很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。</p>
</body>
</html> 類選擇器和ID選擇的區別：
相同點：可以應用於任何元素
不同點：1.ID選擇器只能在文件中使用一次；2.可以使用類選擇器詞列表方法為一個元素同時設定多個樣式。