本節(jié)我們來講一下類選擇器和ID選擇器。
上一節(jié)我們學(xué)習(xí)了標(biāo)簽選擇器艘虎，但是在使用標(biāo)簽選擇器的時候會有一個問題唉侄，舉個例子，我們先來看下面這段代碼：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS學(xué)習(xí)(9xkd.com)</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<h3>動物園里有什么野建？</h3>
<p>小白兔</p>
<p>小獅子</p>
<p>小老虎</p>
<p>小猴子</p>
</body>
</html>
在瀏覽器中的演示效果：
如果我們想要將上述代碼中 “小兔子” 字體樣式設(shè)置為粉色加粗属划，其他內(nèi)容不變，要怎么做候生？ 如果使用標(biāo)簽選擇器 p 來設(shè)置樣式同眯，那上述代碼中四個 <p> 標(biāo)簽中的內(nèi)容樣式都會跟著改變呀，所以這時候用標(biāo)簽選擇器顯然不合適陶舞。
要解決這個問題嗽测，我們就需要用到本節(jié)要學(xué)習(xí)的 CSS 中的類選擇器和 ID 選擇器啦。
類選擇器
類選擇器用于描述一組標(biāo)簽的樣式肿孵，一個類選擇器可以在多個標(biāo)簽上使用唠粥。
語法：
.class_name{
屬性：屬性值;
}
類選擇器前面必須有一個點 .，這個點必不可少停做，是類選擇器的標(biāo)志晤愧。類選擇器的名稱 class_name 是自定義的，選擇器中的屬性和屬性值跟標(biāo)簽選擇器中一樣蛉腌。
示例：
例如上述代碼中官份，我們要給“小兔子” 字體樣式設(shè)置為粉色加粗，可以自定義一個類選擇器：
.rabbit{
color: pink;
font-weight: bold;
}
然后在 HTML 標(biāo)簽上通過 class 屬性來使用定義好的類樣式烙丛，格式為：
<標(biāo)簽名 class="類名稱">標(biāo)簽內(nèi)容</標(biāo)簽名>
如下所示：
<p class="rabbit">小白兔</p>
在使用類樣式的時候舅巷，只需要類樣式名，不需要在前面加點河咽。在瀏覽器中演示效果如下：
類選擇器有一個好處就是钠右，我們可以在同一個頁面中多個 HTML 標(biāo)簽上，使用同一個類選擇器忘蟹。
示例：
例如我們除了可以在 <p> 標(biāo)簽上使用類選擇器 rabbit飒房，也可以在 <h3> 標(biāo)簽上使用：
<body>
<h3 class="rabbit">動物園里有什么首有？</h3>
<p class="rabbit">小白兔</p>
<p>小獅子</p>
<p>小老虎</p>
<p>小猴子</p>
</body>
在瀏覽器中演示效果：
ID選擇器
ID選擇器和類選擇器的使用基本差不多惕蹄，但是還有一些不同的地方：
- ID 選擇器的是以井號
#開頭來定義的。而類選擇器是以點.來定義的。 - ID 選擇器在 HTML 中是可以通過
id屬性來使用侦副。而類選擇器是通過class屬性來使用的贞岭。 - 同一個頁面中一個ID選擇器只能在中出現(xiàn)一次又憨，是唯一的袜炕。而類選擇器可以在多次出現(xiàn)，所以ID選擇器的針對性更強惜颇。
示例：
通過 # 來定義一個ID選擇器皆刺，設(shè)置背景顏色為粉色的樣式：
#only{
background-color: pink;
}
然后在 HTML 中通過 id 屬性使用這個ID選擇器：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS學(xué)習(xí)(9xkd.com)</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<h3 class="rabbit">動物園里有什么？</h3>
<p class="rabbit">小白兔</p>
<p>小獅子</p>
<p>小老虎</p>
<p id="only">小猴子</p>
</body>
</html>
在瀏覽器中演示效果：
我們可以在 HTML 標(biāo)簽中通過 id 屬性來使用 CSS 中對應(yīng)的 ID 選擇器凌摄。在使用時羡蛾，ID選擇器名稱前面不需要帶井號#。
總結(jié)
當(dāng)我們想要在 HTML 元素中設(shè)置 CSS 樣式時锨亏，可以通過選擇器來實現(xiàn)痴怨，最常用的是三種基礎(chǔ)選擇器。當(dāng)標(biāo)簽選擇器不能滿足我們的需求時器予，我們就可以使用類選擇器和ID選擇器浪藻。
記住在同一個頁面中，不允許有相同的 id 出現(xiàn)乾翔，但是允許有相同的 class爱葵。
