上節課我們講了一下CSS通過什麼方式去控制頁面，如果不記得，我來幫大家回憶一下，總共有四種方式行內方式、內嵌方式、連結方式、匯入方式，大家通過這四種方式就可以實現CSS對HTML頁面樣式的控制，如果要讓這些樣式對HTML頁面中的元素實現一對一，一對多或者多對一的控制，這就需要用到CSS選取器，HTML頁面中的元素就是通過CSS選取器進行控制的。
引用:CSS選取器共有三種：標籤選取器、ID選取器、類別選取器。
為了後面的對選取器的解釋更容易理解，在這裡先打個比喻，如果把你所處的環境視為HTML頁面的話，環境裡的每一個人則相當於HTML頁面內標籤元素，每個人都有一個ID(身份證)，那麼html中的每一個標籤也都有自己的ID，大家都知道ID是唯一的，不可能重複。
【標籤選取器】
一個完整的HTML頁面是有很多不同的標籤組成，而標籤選取器，則是決定哪些標籤採用相應的CSS樣式，(在大環境中你可能出於不同的位置，但是不管怎麼樣，你總是穿著同一套衣服，這件衣服就是由標籤選取器事先給你限定好的，不管走到哪裡都是這身衣服)比如，在style.css檔案中對p標籤樣式的聲明如下：
p{
font-size:12px;
background:#900;
color:#090;
}
則頁面中所有p標籤的背景都是#900(紅色)，文字大小均是12px，顏色為#090(綠色)，這在後期維護中，如果想改變整個網站中p標籤背景的顏色，只需要修改background屬性就可以了，就這麼容易！
【ID選取器】
ID選取器在某一個HTML頁面中只能使用一次(當然也可以用好幾次，不過就不符合W3C標準了，那頁面也就不是標準頁面嘍~，咱們的目的不就是為了做標準的頁面麼，所以建議大家不要在同一個html頁面中多個標籤擁有共同的ID)，就像在你所處的環境中，你只有一個ID(身份證)，不可能重複！相信大家也能看出來，ID選取器更具有針對性，如：先給某個HTML頁面中的某個p標籤起個ID，代碼如下：
<p id="one">此處為p標籤內的文字</p>
CSS中定義ID為one的p標籤的屬性，就需要用到#，代碼如下：
複製內容到剪貼簿 代碼:#one{
font-size:12px;
background:#900;
color:#090;
}
這樣頁面中的某個p就會是CSS中定義的樣式。
【類別選取器】
這種選取器更容易理解了，就是使頁面中的某些標籤(可以是不同的標籤)具有相同的樣式，就像國慶中某個方陣中，肯定都是不同的人，卻均穿紅色衣服，手中高舉花環，樣式都是一樣的，如果想讓這一類人都有共同的樣式，該怎麼做呢~呵呵，和ID選取器的用法類似，只不過把id換做class，如下：
<p class="one">此處為p標籤內的文字</p>
如果我還想讓div標籤也有相同的樣式，怎麼辦呢？加上同樣的class就可以了，如下
複製內容到剪貼簿 代碼:<div class="one">此處為p標籤內的文字</div>
這樣頁面中凡是加上class="one"的標籤，樣式都是一樣的嘍~
CSS定義的時候和ID選取器差不多，只不過把#換成.，如下
.one{
font-size:12px;
background:#900;
color:#090;
}
複製代碼補充:一個標籤可以有多個類別選取器的值，不同的值用空格分開，如：
複製內容到剪貼簿 代碼:<div class="one yellow leftStyle">此處為p標籤內的文字</div>
這樣我們可以將多個樣式用到同一個標籤中，當然也可以，ID和class一塊用
複製內容到剪貼簿 代碼:<div id="div1" class="one yellow leftStyle">此處為p標籤內的文字</div>
【通用選取器】
到這裡，前三種基本的選取器說完了，但是還需要給大家介紹一個CSS選取器中功能最強大但是用的最少的一種選取器“通用選取器”*
{此處為CSS代碼}
複製代碼強大之處是因為他對父級中的所有HTML標籤進行樣式定義，可對具有共同樣式的標籤樣式進行定義(有點小學數學中的提取公因式)，這樣可以大大精簡代碼；既然有這麼強大的功能為什麼是用的最少呢，同樣還是因為他的強大，他是對父級元素內的所有標籤進行定義，所以只要你定義了，那麼父級裡面的所有的標籤，甭管有沒有必要，也都相當於加上了通用選取器裡面的代碼了，能這麼說大家不能夠完全理解，沒關係，我給大家舉個例子，請看下面
複製內容到剪貼簿 代碼:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style type="text/css">
<!--
#div1 *{
background:#eee;/*設定DIV1裡面所有的元素背景均為灰色*/
color:#333;/*設定置DIV1裡面所有的元素的字型顏色均為黑色*/
}
-->
</style>
</head>
<body>
<div id="div1">
<p>這裡是p標籤地區</p>
<div>這裡是a標籤地區</div>
</div>
<div id="div2">
<p>這裡是p標籤地區</p>
<div>這裡是a標籤地區</div>
</div>
</body>
</html>
大家運行一下上面的例子，div1裡面的兩個標籤是不是樣式一樣，這就是通用選取器的強大之處，不管裡面有多少個標籤都會將樣式加到所有標籤內，如果div1裡面得所有的標籤都有一部分相同的CSS代碼，那麼可以把這部分代碼提取出來，用通用選取器來定義，這樣可以大大縮減代碼，但是如果div1裡面只要有一個和其他元素沒有相同的代碼，就不能用通用選取器來定義，這也就是CSS通用選取器不靈活的一點。現在大家明白為什麼通用選取器是選取器裡面功能最強大的但又是用的最少的選取器了吧~~呵呵
對於通用選取器還有一個不得不提的用法，就是為了保證作出的頁面能夠相容多種瀏覽器，所以要對HTML內的所有的標籤進行重設，會將下面的代碼加到CSS檔案的最頂端*
{margin:0; padding:0;}
為什麼要這麼用呢，因為每種瀏覽器都內建有CSS檔案，如果一個頁面在瀏覽器載入頁面後，發現沒有CSS檔案，那麼瀏覽器就會自動調用它本身內建的CSS檔案，但是不同的瀏覽器內建的CSS檔案又都不一樣，對不同標籤定義的樣式不一樣，如果我們想讓做出的頁面能夠在不同的瀏覽器顯示出來的效果都是一樣的，那麼我們就需要對對HTML標籤重設，就是上面的代碼了，但是這樣也有不好的地方，因為HTML4.01中有89個標籤，所以相當於在頁面載入CSS的時候，先對這89個標籤都加上了{margin:0; padding:0;}，在這裡我不建議大家這麼做，因為89個標籤中需要重設的標籤是很少數，沒有必要將所有的標籤都重設，需要哪些標籤重設就讓哪些標籤重設就可以了，如下
複製內容到剪貼簿 代碼:body,div,p,a,ul,li{margin:0; padding:0;}
如果還需要dl、dt、dd標籤重設，那就在上面加上就可以了，如下
複製內容到剪貼簿 代碼:body,div,p,a,ul,li,dl,dt,dd{margin:0; padding:0;}
用到那些就寫那些，這點也可以看做衡量頁面重構師製作頁面水平的高低，以及是否專業的一個方面到這裡大家更應該明白這句話“通用選取器是功能最強大但是用的最少的選取器”了吧~^_^
OK！選取器的內容我向大家應該都明白了，後面就繼續講解一下“選取器的集體聲明”和“選取器的嵌套”
【選取器的集體聲明】
在我們使用選取器的時候，有些標籤樣式是一樣的，或者某些標籤都有共同的樣式
屬性，我們可以將這些標籤集體聲明，不同的標籤用“,”分開，比如：
h1,h2,h3,h4,h5,h6{color:#900;}複製內容到剪貼簿
#one,#three,.yellow{font-size:14px;}
#one{background:#ccc;}
#three{background:#ccc;}
.yellow{background:#ccc;}
和小學的提取公因式差不多，把共同的部分提取出來，這麼做的好處，相同的部分共同定義，不同的部分單獨定義，保證風格統一，樣式修改靈活，這也是最佳化CSS代碼的一塊，要記住喲~
【選取器的嵌套】
選取器也是可以嵌套的，如：
#div1 p a{color:#900;}/*意思是在ID為div1內的p標籤內的連結a標籤的文字顏色為紅色*/
這樣的好處就是不需要在單獨的為ID為div1的標籤內的p標籤內的a標籤單獨定義class選取器或者ID選取器，CSS代碼不就少了嘛~同樣也是CSS代碼最佳化的一塊。
到這裡，基本的選取器說完了，但是還需要給大家介紹一個“通用選取器”*
{此處為CSS代碼}
好，這節課主要講解了三種CSS代碼選取器、選取器的聲明、選取器的嵌套三塊知識，要掌握好，如果有不懂，可以留言。
出自:CSS學習論壇
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
