1.1.2 CSS選擇器

CSS 選擇器最基本的有四種：標簽選擇器、ID 選擇器、類選擇器、通用選擇器。

【標簽選擇器】

一個完整的 HTML 頁面由很多不同的標簽組成，而標簽選擇器，則是決定哪些標簽采用相應的 CSS 樣式，比如，在 style.css 文件中對 p 標簽樣式的聲明如下：

?

<span style="font-family:Microsoft YaHei;font-size:14px;">p {</span>font-size: 12px;background: #900;color: 090; }

?

?

這么做，會使頁面中所有 p 標簽的背景都是#900(紅色)，文字大小均是 12px，顏色為#090(綠色)，返在后期維護中，如果想改發整個網站中 p 標簽背景癿顏色，叧需要修改background 屬性就可以了，就這么容易！當然你也可以設置整個頁面中所有的 div 的屬性、a 鏈接的屬性、span 的屬性，這么做方便是方便，但是不夠靈活，如果頁面中除了某個 p標簽背景不是紅色外，其他的都是紅色，就不能用這種方法定義了。

【ID 選擇器】

ID 選擇器在某一個 HTML 頁面中只能使用一次，就像只有一個身仹證? (ID)一樣，不重復！在頁面中使用 ID 選擇器更具有針對性，如：

先給某個HTML頁面中的某個p標簽起個ID，代碼如下：

?

<p id="one">W3CFuns.com:打造中國 Web 前端開發人員最專業的貼心社區！</p>

在 CSS 中定義 ID 為 one 癿 p 標簽的屬性，就需要用到“#” ，代碼如下：

?

?

#one{font-size:12px;background:#900;color:090; }

?

?

返樣頁面中癿某個 p 就會是 CSS 中定義的樣式。 針對“頁面中除了某個 p 標簽背景不是紅色外，其他的都是紅色的”情況，我們就可以用 ID 選擇器單獨定義那個背景不為紅色的 p 標簽，返樣問題就解決了。

【類選擇器】

這種選擇器更容易理解了，就是使頁面中的某些標簽(可以是不同的標簽)具有相同的樣式，就像國慶某個方陣中，肯定都是不同癿人，卻均穿紅色衣服，手中高舉花環，樣式都是一樣的，如果想讓這一類人都有共同的樣式，該怎樣做呢~呵呵，和 ID 選擇器的用法類似，只不過過把 id 換做 class，如下：

?

<p class="one">此處為 p 標簽內的文字</p>

如果我還想讓 div 標簽也有相同的樣式，怎么辦呢？加上同樣的 class 就可以了，如下：

?

?

<div class="one">此處為 DIV 標簽內的文字</div>

?

?

返樣頁面中凡是加上 class="one"的標簽，樣式都是一樣的了~
CSS 定義的時候和 ID 選擇器差不多，只不過把#換成. ，如下：

?

.one{font-size:12px;background:#900;color:090; }

?

補充：一個標簽可以有多個類選擇器的值，不同的值用空格分開，如：

<div class="one yellow left">一個標簽可以有多個類選擇器的值</div>

這樣我們可以將多個樣式用到同一個標簽中，當然也可以 ID 和 class 一塊用

?

<div id="my" class="one yellow left">ID 和 class 可同時應用到同一個標簽</div>

?

【通用選擇器】

到這里，前三種基本的選擇器說完了，但是還需要給大家介終一個 CSS 選擇器中功能最強大但是用的最少的一種選擇器“通用選擇器”，就是“*”星號。

?

*{此處為 CSS 代碼}

?

?

強大之處是因為他對整個網頁中所有 HTML 標簽進行樣式定義，這種功能類似“標簽選擇器” ，覆蓋的對象更加廣泛，是整個HTML 的所有標簽，功能是強大，但是返樣反而限制了它的靈活性。

對于通用選擇器還有一個不得不提的用法，就是為了保證作出的頁面能夠兼容多種瀏覽器，所以要對 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;}

?

?

用到哪些就寫哪些，這點也可以看做衡量頁面重構師制作頁面水平的高低，以及是否專業的一個方面。

【選擇器的集體聲明】

在我們使用選擇器的時候，有些標簽樣式是一樣的，或者某些標簽都有共同的樣式屬性，我們可以將這些標簽集體聲明，不同的標簽用“,”分開，比如：

?

h1,h2,h3,h4,h5,h6{color:#900;}

再舉個例子，無論什么樣的選擇器，”標簽選擇器”，”ID 選擇器”，”類選擇器”? ，叧要是選擇器，叧要有公共的 CSS 代碼，就可以用“選擇器的集體聲明” ，起到精簡代碼的作用，有一段代碼如下：

?

?

#header{font-size:14px; background:#ccc;} div{font-size:14px; width:960px;} .blue{font-size:14px; color:#009;} .h1{font-size:14px; font-weight:normal;}

?

?

我們就可以將上面的代碼迕行精簡，把公共的 CSS 代碼用選擇器的集體聲明提取出來，有點類似小學的“提取公因式”似的，如下：

?

#header ,div ,.blue,h1{font-size:14px;} #header{background:#ccc;} div{width:960px;} .blue{color:#009;} .h1{font-weight:normal;}

這是選擇器的集體聲明的經典應用，把共同的部分提取出來，這樣做的好處，相同的部分共同定義，不同的部分單獨定義，保證風格統一，樣式修改靈活，這也是優化 CSS 代碼癿一塊，要記住！

?

【選擇器的嵌套】

選擇器也是可以嵌套的，如：

?

#div1 p a{color:#900;}/*意思是在 ID 為 div1 內的 p 標簽內的鏈接 a 標簽的文字顏色為紅色*/

?

返樣的好處就是不需要在單獨癿為 ID 為 div1 的標簽內的 p 標簽內的 a 標簽單獨定義class 選擇器或者 ID 選擇器，CSS 代碼不就少了嘛~同樣也是 CSS 代碼優化的一塊。

---

?

轉載于:https://www.cnblogs.com/Destiny-Gem/p/3795696.html

總結

以上是生活随笔為你收集整理的《Two Days DIV + CSS》读书笔记——CSS选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。