<p> 通常，網站建設公工程師都很難解釋，甚至自己都分不清楚類選擇器和ID選擇器，網站建設選擇器實在是太豐富了，也不一定要分的很清楚，但是作為高端工程師，我們就應該要認真辨別各位工具的利弊，達到用最小化代價創造最大化價值，學習了類選擇器和ID選擇器，我們會發現他們之間有很多的相似處，是不是兩者可以通用呢？ </p> <p> 網站開發類選擇器與id選擇器的區別：W3C標準這樣規定的，其一：在同一個頁面內，不允許有相同名字的id對象出現，但是允許相同名字的class。其二：當頁面中用到js或者要動態調用對象的時候，要用到id 控制頁面總共有四種方式行內方式、內嵌方式、鏈接方式、導入方式， 通過這四種方式就可以實現CSS對HTML頁面樣式的控制，如果要讓這些樣式對HTML頁面中的元素實現一對一，一對多或者多對一的控制，這就需要用到CSS選擇器，HTML頁面中的元素就是通過CSS選擇器進行控制的。CSS選擇器共有三種：標簽選擇器、ID選擇器、類選擇器。 為了后面的對選擇器的解釋更容易理解，在這里先打個比喻，如果把你所處的環境視為HTML頁面的話，環境里的每一個人則相當于HTML頁面內標簽元素，每個人都有一個ID(身份證)，那么html中的每一個標簽也都有自己的ID，大家都知道ID是唯一的，不可能重復。 </p> 【標簽選擇器】一個完整的HTML頁面是有很多不同的標簽組成，而標簽選擇器，則是決定哪些標簽采用相應的CSS樣式，(在大環境中你可能出于不同的位置，但是不管怎么樣，你總是穿著同一套衣服，這件衣服就是由標簽選擇器事先給你限定好的，不管走到哪里都是這身衣服)比如，在style.css文件中對p標簽樣式的聲明如下：<br /> p{<br /> &nbsp;font-size:12px;<br /> &nbsp;background:#900;<br /> &nbsp;color:090;<br /> }<br /> &nbsp;復制代碼<br /> 則頁面中所有p標簽的背景都是#900(紅色)，文字大小均是12px，顏色為#090(綠色)，這在后期維護中，如果想改變整個網站中p標簽背景的顏色，只需要修改background屬性就可以了，就這么容易！【ID選擇器】ID選擇器在某一個HTML頁面中只能使用一次(當然也可以用好幾次，不過就不符合W3C標準了，那頁面也就不是標準頁面嘍~，咱們的目的不就是為了做標準的頁面么，所以建議大家不要在同一個html頁面中多個標簽擁有共同的ID)，就像在你所處的環境中，你只有一個ID(身份證)，不可能重復！相信大家也能看出來，ID選擇器更<br /> 具有針對性，如：<br /> 先給某個HTML頁面中的某個p標簽起個ID，代碼如下：<br /> &lt;pid="one"&gt;此處為p標簽內的文字&lt;/p&gt;<br /> 復制代碼<br /> 在CSS中定義ID為one的p標簽的屬性，就需要用到#，代碼如下：<br /> #one{<br /> font-size:12px;<br /> background:#900;<br /> color:090;<br /> }<br /> 復制代碼<br /> 這樣頁面中的某個p就會是CSS中定義的樣式。【類選擇器】這種選擇器更容易理解了，就是使頁面中的某些標簽(可以是不同的標簽)具有相同的樣式，就像國慶中某個方陣中，肯定都是不同的人，卻均穿紅色衣服，手中高舉花環，樣式都是一樣的，如果想讓這一類人都有共同的樣式，該怎么做呢~呵呵，和ID選擇器的用法類似，只不過把id換做class，如下：<br /> &lt;pclass="one"&gt;此處為p標簽內的文字&lt;/p&gt;<br /> 復制代碼<br /> 如果我還想讓div標簽也有相同的樣式，怎么辦呢？加上同樣的class就可以了，如<br /> 下&lt;divclass="one"&gt;此處為p標簽內的文字&lt;/div&gt;<br /> 復制代碼<br /> 這樣頁面中凡是加上class="one"的標簽，樣式都是一樣的嘍~<br /> CSS定義的時候和ID選擇器差不多，只不過把#換成.，如下<br /> .one{<br /> font-size:12px;<br /> background:#900;<br /> color:090;<br /> }<br /> 復制代碼<br /> 補充:一個標簽可以有多個類選擇器的值，不同的值用空格分開，如：<br /> &lt;div class="one yellowleftStyle"&gt;此處為p標簽內的文字&lt;/div&gt;<br /> 復制代碼<br /> 這樣我們可以將多個樣式用到同一個標簽中，當然也可以，ID和class一塊用<br /> &lt;div id="div1" class="one yellowleftStyle"&gt;此處為p標簽內的文字&nbsp;<br /> &lt;/div&gt;<br /> 復制代碼<br /> 【通用選擇器】<br /> 到這里，前三種基本的選擇器說完了，但是還需要給大家介紹一個CSS選擇器中功能最強大但是用的最少的一種選擇器“通用選擇器”<br /> *{此處為CSS代碼}<br /> 復制代碼<br /> 強大之處是因為他對父級中的所有HTML標簽進行樣式定義，可對具有共同樣式的標簽樣式進行定義(有點小學數學中的提取公因式)，這樣可以大大精簡代碼；既然有這么強大的功能為什么是用的最少呢，同樣還是因為他的強大，他是對父級元素內的所有標簽進行定義，所以只要你定義了，那么父級里面的所有的標簽，甭管有沒有必要，也都相當于加上了通用選擇器里面的代碼了，能這么說大家不能夠完全理解，沒關系，我給大家舉個例子，請看下面：<br /> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;<br /> &lt;htmlxmlns="http://www.w3.org/1999/xhtml"&gt;<br /> &lt;head&gt;<br /> &lt;meta http-equiv="Content-Type"content="text/html; charset=gb2312" /&gt;<br /> &lt;title&gt;無標題文檔&lt;/title&gt;<br /> &lt;style type="text/css"&gt;<br /> &lt;!--<br /> #div1 *{<br /> background:#eee;<br /> color:#333;<br /> }<br /> --&gt;<br /> &lt;/style&gt;<br /> &lt;/head&gt;<br /> &lt;body&gt;<br /> &lt;div id="div1"&gt;<br /> &lt;p&gt;這里是p標簽區域&lt;/p&gt;<br /> &lt;div&gt;這里是a標簽區域&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div id="div2"&gt;<br /> &lt;p&gt;這里是p標簽區域&lt;/p&gt;<br /> &lt;div&gt;這里是a標簽區域&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/body&gt;<br /> &lt;/html&gt;<br /> 復制代碼<br /> 大家運行一下上面的例子，div1里面的兩個標簽是不是樣式一樣，這就是通用選擇器的強大之處，不管里面有多少個標簽都會將樣式加到所有標簽內，如果div1里面得所有的標簽都有一部分相同的CSS代碼，那么可以把這部分代碼提取出來，用通用選擇器來定義，這樣可以大大縮減代碼，但是如果div1里面只要有一個和其他元素沒有相同的代碼，就不能用通用選擇器來定義，這也就是CSS通用選擇器不靈活的一點。現在大家明白為什么通用選擇器是選擇器里面功能最強大的但又是用的最少的選擇器了吧~~呵呵<br /> 對于通用選擇器還有一個不得不提的用法，就是為了保證作出的頁面能夠兼容多種瀏覽器，所以要對HTML內的所有的標簽進行重置，會將下面的代碼加到CSS文件的最頂端<br /> *{margin:0; padding:0;}<br /> 復制代碼<br /> 為什么要這么用呢，因為每種瀏覽器都自帶有CSS文件，如果一個頁面在瀏覽器加載頁面后，發現沒有CSS文件，那么瀏覽器就會自動調用它本身自帶的CSS文件，但是不同的瀏覽器自帶的CSS文件又都不一樣，對不同標簽定義的樣式不一樣，如果我們想讓做出的頁面能夠在不同的瀏覽器顯示出來的效果都是一樣的，那么我們就需要對對HTML標簽重置，就是上面的代碼了，但是這樣也有不好的地方，因為HTML4.01中有89個標簽，所以相當于在頁面加載CSS的時候，先對這89個標簽都加上了{margin:0;padding:0;}，在這里我不建議大家這么做，因為89個標簽中需要重置的標簽是很少數，沒有必要將所有的標簽都重置，需要哪些標簽重置就讓哪些標簽重置就可以了，如下<br /> body,div,p,a,ul,li{margin:0; padding:0;}<br /> 復制代碼<br /> 如果還需要dl、dt、dd標簽重置，那就在上面加上就可以了，如下<br /> body,div,p,a,ul,li,dl,dt,dd{margin:0; padding:0;}<br /> 復制代碼<br /> 用到那些就寫那些，這點也可以看做衡量頁面重構師制作頁面水平的高低，以及是否專業的一個方面<br /> 到這里大家更應該明白這句話“通用選擇器是功能最強大但是用的最少的選擇器”了吧~^_^<br /> OK！選擇器的內容我向大家應該都明白了，后面就繼續講解一下“選擇器的集體聲<br /> 明”和“選擇器的嵌套”<br /> 【選擇器的集體聲明】<br /> 在我們使用選擇器的時候，有些標簽樣式是一樣的，或者某些標簽都有共同的樣式<br /> 屬性，我們可以將這些標簽集體聲明，不同的標簽用“,”分開，比如：<br /> h1,h2,h3,h4,h5,h6{color:#900;}<br /> 復制代碼<br /> #one,#three,.yellow{font-size:14px;}<br /> #one{background:#ccc;}<br /> #three{background:#ccc;}<br /> .yellow{background:#ccc;}<br /> 復制代碼<br /> 和小學的提取公因式差不多，把共同的部分提取出來，這么做的好處，相同的部分<br /> 共同定義，不同的部分單獨定義，保證風格統一，樣式修改靈活，這也是優化CSS代<br /> 碼的一塊，要記住喲~<br /> 【選擇器的嵌套】<br /> 選擇器也是可以嵌套的，如：<br /> #div1 p a{color:#900;}<br /> 復制代碼<br /> 這樣的好處就是不需要在單獨的為ID為div1的標簽內的p標簽內的a標簽單獨定義<br /> class選擇器或者ID選擇器，CSS代碼不就少了嘛~同樣也是CSS代碼優化的一塊。<br /> 到這里，基本的選擇器說完了，但是還需要給大家介紹一個“通用選擇器”<br /> *{此處為CSS代碼}<br /> 復制代碼<br /> &nbsp;【三種CSS代碼選擇器、選擇器的聲明、選擇器的嵌套三塊知識】<br /> 網站開發類選擇器與id選擇器的區別。作為一名網站建設工程師，最重要的是要合理的使用工具，讓工具代替人工去做一些不必要的工作。網站建設是一個細致而健全的工作，學會用心去發現，去穩固網站建設的精華。<br /> <br />