在“CSS入門教程”中，我們並不像其他教材一樣，一上來就恨不得把所有的CSS選擇器都灌輸給讀者，到最後搞得讀者對CSS選擇器一頭霧水。
“CSS入門教程”是針對初學者而言的，在這個教程中，我們先講解最實用的CSS選擇器，然後在CSS進階教程中，我們會系統而詳細地講解剩下的CSS選擇器。
從上一節，我們知道，CSS選擇器的功能就是把我們所需要的標簽選中，然後操作選中的標簽CSS樣式。
CSS選擇器的格式：
選擇器
{
樣式屬性1:取值1;
樣式屬性2:取值2;
……
}
元素選擇器，就是“選中”相同的元素，然後對相同的元素設置同一個CSS樣式。
語法：
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
div{color:red;}
</style>
</head>
<body>
<div> 學習網</div>
<p> 學習網</p>
<span> 學習網</span>
<div> 學習網</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
“div{color:red}”表示把頁面所有的div元素選中，然後為所有的div元素設置顏色color為紅色。
在這裡我們可以看出，元素選擇器就是選擇相同的元素，而不會選擇其他元素，例如這段代碼中的p元素和span元素就沒有被選中，因此它們的內容就沒有變成紅色。
我們可以為元素設置一個id，然後針對這個id的元素進行CSS樣式操作。注意，在同一個頁面中，不允許出現兩個相同的id，這個就像沒有哪兩個人的身份證號是相同的道理一樣。
語法：
說明：
id名前面必須要加上前綴“#”，否則該選擇器無法生效。id名前面加上“#”，表明這是一個id選擇器。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#lvye{color:red;}
</style>
</head>
<body>
<div> 學習網</div>
<div id="lvye"> 學習網</div>
<div> 學習網</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
“#lvye{color:red;}”表示選中id為lvye的元素，然後為這個元素設置CSS屬性“color:red;”。
選擇器為我們提供了一種選擇方式。如果我們不使用選擇器，就沒辦法把第二個div選中。
class選擇器，也就是“類選擇器”。我們可以對“相同的元素”或者“不同的元素”設置一個class（類名），然後針對這個class的元素進行CSS樣式操作。
語法：
說明：
class名前面必須要加上前綴“.”（英文點號），否則該選擇器無法生效。類名前面加上“.”，表明這是一個class選擇器。
舉例1：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.lv{color:red;}
</style>
</head>
<body>
<div> 學習網</div>
<p class="lv"> 學習網</p>
<span class="lv"> 學習網</span>
<div> 學習網</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
“.lv{color:red;}”表示選中class為lv的所有元素，然後為這些元素設置CSS屬性“color:red;”。
p元素和span元素是兩個不同的元素，但是我們可以為這兩個不同的元素設置相同的class，這樣就可以同時為這兩個不同的元素設置相同的CSS樣式了。
舉例2：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.lv{color:red;}
</style>
</head>
<body>
<div class="lv"> 學習網</div>
<div class="lv"> 學習網</div>
<div> 學習網</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
雖然這個HTML頁面有3個div元素，但是我們為前兩個div元素設置相同的class，然後設置相同class的元素顏色為紅色。因此，第3個div層內容不會變成紅色，因為它不屬於class="lv"，它沒有被“選中”。