從零開始學習html（八）CSS選擇器——上

一、什麼是選擇器？ 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>選擇器</title> 6 <style type ...

一、什麼是選擇器？

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>選擇器</title>
 6 <style type="text/css">
 7 body{
 8     font-size:12px;
 9     color:red;    
10 }
11 </style>
12 </head>
13 <body>
14 <p>慕課網（IMOOC）是學習編程最簡單的免費平臺。慕課網提供了豐富的移動端開發、php開發、web前端、html5教程以及css3視頻教程等課程資源。它富有交互性及趣味性，並且你可以和朋友一起編程。</p>
15 </body>
16 </html>

什麼是選擇器

每一條css樣式聲明（定義）由兩部分組成，形式如下：

選擇器{
    樣式;
}

在{}之前的部分就是“選擇器”，“選擇器”指明瞭{}中的“樣式”的作用對象，也就是“樣式”作用於網頁中的哪些元素。

比如代碼編輯器中第7行代碼中的“body”就是選擇器。

二、標簽選擇器

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>認識html標簽</title>
 6 <style type="text/css">
 7 
 8 
 9 
10 
11 </style>
12 </head>
13 <body>
14     <h1>勇氣</h1>
15     <p>三年級時，我還是一個膽小如鼠的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
16     <p>到了三年級下學期時，我們班上了一節公開課，老師提出了一個很簡單的問題，班裡很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。</p>
17     <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
18 </body>
19 </html>

標簽選擇器

標簽選擇器其實就是html代碼中的標簽。如代碼編輯器中的<html>、<body>、<h1>、<p>、<img>。例如下麵代碼：

p{font-size:12px;line-height:1.6em;}

上面的css樣式代碼的作用：為p標簽設置12px字型大小，行間距設置1.6em的樣式。

來試試，為標題“勇氣”添加樣式，把h1標簽預設的粗體樣式去掉並將字體顏色設置為紅色

1、在編輯器的第7行，輸入h1{

2、在編輯器的第8行，輸入font-weight:normal;

3、在編輯器的第9行，輸入color:red;

4、在編輯器的第10行，輸入}

font-weight:normal;/*去掉粗體樣式*/

三、類選擇器

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>認識html標簽</title>
 6 <style type="text/css">
 7 .stress{
 8     color:red;
 9 }
10 
11 </style>
12 </head>
13 <body>
14     <h1>勇氣</h1>
15     <p>三年級時，我還是一個<span class="stress">膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個<span class="stress">勇氣</span>來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
16     <p>到了三年級下學期時，我們班上了一節公開課，老師提出了一個很簡單的問題，班裡很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。</p>
17     <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
18 </body>
19 </html>

類選擇器

類選擇器在css樣式編碼中是最常用到的，如代碼編輯器中的代碼:可以實現為“膽小如鼠”、“勇氣”字體設置為紅色。

語法：

.類選器名稱{css樣式代碼;}

註意：

1、英文圓點開頭

2、其中類選器名稱可以任意起名，但不能以數字開頭（但不要起中文噢）

使用方法：

第一步：使用合適的標簽把要修飾的內容標記起來，如下：

<span>膽小如鼠</span>

第二步：使用class="類選擇器名稱"為標簽設置一個類，如下：

<span class="stress">膽小如鼠</span>

第三步：設置類選器css樣式，如下：

.stress{color:red;}/*類前面要加入一個英文圓點*/

來試試，為第二段文字中的“公開課”三個文字設置為綠色

1.在編輯器的第16行，輸入:

<span class="setGreen">公開課</span>

2.在編輯器的第10-12行，輸入:

.setGreen{
   color:green;
}

標簽選擇器針對的是html自帶的標簽（p,h1），類選擇器是可以自定義的(利用span class=""設定一個類)

四、ID選擇器

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>認識html標簽</title>
 6 <style type="text/css">
 7 #stress{
 8     color:red;
 9 }
10 
11 </style>
12 </head>
13 <body>
14     <h1>勇氣</h1>
15     <p>三年級時，我還是一個<span id="stress">膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
16     <p>到了三年級下學期時，我們班上了一節公開課，老師提出了一個很簡單的問題，班裡很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。</p>
17 
18 </body>
19 </html>

ID選擇器

在很多方面，ID選擇器都類似於類選擇符，但也有一些重要的區別：

1、為標簽設置id="ID名稱"，而不是class="類名稱"。

2、ID選擇符的前面是井號（#）號，而不是英文圓點（.）。

代碼編輯器中就是一個ID選擇符的完整實例。

來試試，為第二段文字中的“公開課”三個文字使用ID選擇器的方式設置為綠色

1.在編輯器的第16行，輸入:

<span id="setGreen">公開課</span>

2.在編輯器的第10-12行，輸入:

#setGreen{
   color:green;
}

五、類和ID選擇器的區別

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>類和ID選擇器的區別</title>
 6 <style type="text/css">
 7 .stress{
 8     color:red;
 9 }
10 .bigsize{
11     font-size:25px;
12 }
13 #stressid{
14     color:red;
15 }
16 #bigsizeid{
17     font-size:25px;
18 }
19 </style>
20 </head>
21 <body>
22     <h1>勇氣</h1>
23     <p>三年級時，我還是一個<span class="stress">膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個<span class="stress">勇氣</span>來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
24     <p>到了<span class="stress bigsize">三年級</span>下學期時，我們班上了一節公開課，老師提出了一個很簡單的問題，班裡很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。</p>
25      <p>到了<span id="stressid bigsizeid">三年級</span>下學期時，我們班上了一節公開課，老師提出了一個很簡單的問題，班裡很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。</p>
26     
27 </body>
28 </html>

類和ID選擇器的區別

學習了類選擇器和ID選擇器，我們會發現他們之間有很多的相似處，是不是兩者可以通用呢？

我們不要著急先來總結一下他們的相同點和不同點：

相同點：可以應用於任何元素
不同點：

1、ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。

下麵代碼是正確的：

 <p>三年級時，我還是一個<span class="stress">膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個<span class="stress">勇氣</span>來回答老師提出的問題。</p>

而下麵代碼是錯誤的：

 <p>三年級時，我還是一個<span id="stress">膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個<span id="stress">勇氣</span>來回答老師提出的問題。</p>

2、可以使用類選擇器詞列表方法為一個元素同時設置多個樣式。我們可以為一個元素同時設多個樣式，但只可以用類選擇器的方法實現，ID選擇器是不可以的（不能使用 ID 詞列表）。

下麵的代碼是正確的(完整代碼見代碼編輯器)

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>到了<span class="stress bigsize">三年級</span>下學期時，我們班上了一節公開課...</p>

上面代碼的作用是為“三年級”三個文字設置文本顏色為紅色並且字型大小為25px。

下麵的代碼是不正確的(完整代碼見右側代碼編輯器)

#stressid{
    color:red;
}
#bigsizeid{
    font-size:25px;
}
<p>到了<span id="stressid bigsizeid">三年級</span>下學期時，我們班上了一節公開課...</p>

上面代碼不可以實現為“三年級”三個文字設置文本顏色為紅色並且字型大小為25px的作用。

id就像身份證號碼，是唯一的，該身份證號碼就能代表你。一個人不能有兩個身份證號碼，也不能一個身份證號碼表示兩個人。

而class就像昵稱，該昵稱也能代表你。一個人可以有多個昵稱，也可以多個人用同個昵稱。那麼時候用id，什麼時候用class?
W3C標準這樣規定的，在同一個頁面內，不允許有相同名字的id對象出現，但是允許相同名字的class。這樣，一般網站分為頭，體，腳部分，因為考慮到它們在同一個頁面只會出現一次，所以用id，其他的，比如說你定義了一個顏色為red的class，在同一個頁面也許要多次用到，就用class定義。另外，當頁面中用到js或者要動態調用對象的時候，要用到id，所以要根據自己的情況運用。 class用.
id用#
class可以重名
id不行成熟網站里，你很少看到css里用id選擇器的，都是用class，id選擇器留給寫js的人用，這樣避免衝突。 id是用於一個特定的樣式的（唯一性），並且只能使用一次。class是用於一組相同樣式的（相似性），可以使用多次。不應該用使用次數來說明，應該說id只能指定唯一元素，而class可以指定多個元素，將這些元素劃分為一類。