CSS3之前的版本是CSS2.1，在CSS2.1中，有幾個特別經典的選擇器，分別是標籤選擇器、id選擇器、class選擇器、複合選擇器、以及偽類。
而在CSS3中，這些經典的選擇器也被沿用了下來。
標籤選擇器
標籤選擇器也被稱為元素選擇器、類型選擇器。
標籤選擇器直接使用HTML標籤名作為選擇器，當前頁面上所有的該種標籤，都會被標籤選擇器所選擇。
比如上圖中的span和b就是標籤選擇器。
span這個選擇器會選擇當前頁面上所有的span標籤，把所有的span標籤裡面的文字都變成紅色。
b這個選擇器會選擇當前頁面上所有的b標籤。把所有的b標籤裡面的文字都變成綠色。
標籤選擇器會選擇當前頁面上所有的該種標籤，無論這個標籤所處的位置深淺(意思就是無論如何嵌套)。
比如上圖中，"不負韶華，只爭朝夕"這幾個文字所在的span標籤，外面是包裹著p標籤，下面的無序列表中，li標籤嵌套著"小強"所在的span標籤，這兩個span標籤都會被CSS中的標籤選擇器span所選擇。
這就說明標籤選擇器的"覆蓋面"比較大，所以標籤選擇器通常用於標籤的初始化。
標籤的初始化是什麼意思呢？
因為HTML標籤，往往都是自帶默認樣式的。
比如說，
無序列表標籤，默認情況下，每一個列表項前面都是有一個小圓點的。
超級連結a標籤，默認情況下，它的文字下面是帶一條下劃線的。
那麼，試想一下，在實際開發中，在一個頁面上，往往會有多個無序列表，以及多個a標籤，大多數情況下，我們都不會採用這兩個標籤的默認樣式。
也就是說，大多數情況下，我們都會去掉無序列表項前面的小圓點，去掉a標籤文字的下劃線。因為它們的默認樣式不好看嘛！
這時，我們採用標籤選擇器，就可以很高效方便的把頁面上所有的無序列表標籤和a標籤的默認樣式進行重新設置，把它們全部都設置成沒有小圓點和沒有下劃線。
也就是說，我們一開始就讓頁面上所有的無序列表標籤和a標籤都設置成沒有小圓點和沒有下劃線，當後面哪一個標籤需要小圓點或者需要下劃線時，再給它單獨設置就行。這就是標籤的初始化(所謂初始化，顧名思義，就是設置初始的值)。
上圖中就是初始化無序列表標籤和a標籤的CSS代碼。
list是列表的意思，
style是樣式的意思，
none是沒有的意思，
所以list-style這個屬性的值為none，意思就是讓這個列表的樣式變得沒有，也就是去掉無序列表的默認自帶小圓點的樣式。
text是文本的意思，
decoration是裝飾的意思，
none是沒有的意思，
所以text-decoration這個屬性的值為none，意思就是讓文本裝飾變得沒有，也就是去掉a標籤的文本的默認下劃線樣式。
接下來，在編輯器中實際演示一下標籤選擇器。我創建了一個文件"標籤選擇器和id選擇器.html"，代碼如下：
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>標籤選擇器和id選擇器</title><style>span {color: red; }</style></head><body><p>我們一定<span>不負韶華，只爭朝夕。</span></p><ul><li>A</li><li><span>B</span></li><li><span>C</span></li><li>D</li></ul></body></html>
以上代碼中，無論是p標籤中的span標籤，還是li標籤中的span標籤，無論這個span標籤嵌套的有多深或者多淺，當我們使用標籤選擇器，都可以把它們的字體顏色設置為紅色，瀏覽器效果如下圖：
我們看到，無序列表的列表項，前面是默認自帶小黑圓點這種樣式的。
現在我在這個頁面上多寫幾個a標籤，
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>標籤選擇器和id選擇器</title><style>span {color: red; }</style></head><body><p>我們一定<span>不負韶華，只爭朝夕。</span></p><ul><li>A</li><li><span>B</span></li><li><span>C</span></li><li>D</li></ul><p><ahref="">老年人相信一切</a></p><p><ahref="">中年人懷疑一切</a></p><p><ahref="">年輕人什麼都懂</a></p></body></html>
瀏覽器中效果如下：
我們看到a標籤的文字默認帶有下劃線，字體顏色是紫色。
現在我把無序列表的小黑圓點和a標籤的下劃線去掉，並且把a標籤的文字顏色改為綠色，CSS代碼使用標籤選擇器：
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>標籤選擇器和id選擇器</title><style>span {color: red; }ul {/* 去掉小黑圓點 */list-style: none; }a {/* 去掉下劃線 */text-decoration: none;color: green; }</style></head><body><p>我們一定<span>不負韶華，只爭朝夕。</span></p><ul><li>A</li><li><span>B</span></li><li><span>C</span></li><li>D</li></ul><p><ahref="">老年人相信一切</a></p><p><ahref="">中年人懷疑一切</a></p><p><ahref="">年輕人什麼都懂</a></p></body></html>
在瀏覽器中效果如下：
這就是標籤選擇器的用法。
認識id屬性
標籤是可以有id屬性的。
標籤的id屬性是這個標籤的唯一標識。
比如：
既然id是標籤的唯一標識，那麼就說明，上圖中的id值為"para1"的標籤，在這個頁面上只能有一個。也就是說，頁面上的標籤的任何一個id屬性的值，都不能相同。
我們把id的值可以叫做id的名稱。
id名稱的命名規範：
1. id的名稱只能由數字、字母、下劃線、短橫組成，並且不能以數字開頭。2. id的名稱中的字母，是區分大小寫的。但是習慣上一般都是用小寫字母。
3. 同一個頁面上，任何一個id名稱都互不相同。
id選擇器
當我們給標籤添加了id屬性之後，就可以使用id選擇器了。
在CSS中，id選擇器使用#作為前綴，#後面緊跟id名稱。
比如上圖中，給一個p標籤添加了id屬性，id值為para1，那麼在CSS中，#para1就是一個id選擇器，它表示選擇頁面上id為para1的標籤。
我接著在"標籤選擇器和id選擇器.html"中演示id選擇器。
我接著再寫兩個p標籤，給它們的id名分別為"para1"和"para2"，給它們設置字體顏色分別為深藍色和橙色。
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>標籤選擇器和id選擇器</title><style>span {color: red; }ul {/* 去掉小黑圓點 */list-style: none; }a {/* 去掉下劃線 */text-decoration: none;color: green; }/* id選擇器 */#para1 {color: darkblue; }#para2 {color: orange; }</style></head><body><p>我們一定<span>不負韶華，只爭朝夕。</span></p><ul><li>A</li><li><span>B</span></li><li><span>C</span></li><li>D</li></ul><p><ahref="">老年人相信一切</a></p><p><ahref="">中年人懷疑一切</a></p><p><ahref="">年輕人什麼都懂</a></p><pid="para1">從童年起，我便獨自一人，照顧著歷代的星辰。</p><pid="para2">沒有經歷過什麼生死之事，就不要輕易談什麼生死之交。</p></body></html>
在瀏覽器中效果如下:
如果你把id名寫成"1para"和"2para"，CSS樣式肯定是不起作用的，因為以數字開頭不是規範的寫法，你自己可以試試。