類選擇器

語法：

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

注意：

1、英文圓點開頭

2、其中類選器名稱可以任意起名（但不要起中文噢）

使用方法：

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

<span>膽小如鼠</span>

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

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

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

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

取個唯一標識 - ID選擇器

我們也能實現讓div字型變成紅色的效果:

技術點的解釋：

1、使用ID選擇器，必須給標籤新增上id屬性，為標籤設定id="ID名稱"，而不是class="類名稱"。

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

3、id屬性的值既為當前標籤的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不可以這樣子用