CSS選擇器種類

在網(wǎng)頁設(shè)計和網(wǎng)站制作過程中，會使用CSS來控制網(wǎng)頁的顯示樣式，CSS選擇器的種類可以分為三大類：

• 標簽名選擇器
• 類選擇器
• ID選擇器

除了以上的三種基本選擇器之外，CSS3又推出很多新的CSS選擇器。詳見：CSS3新增選擇器有哪些？

css選擇器優(yōu)先級順序

了解了各種選擇器后，還有一個重要的知識點就是CSS選擇器的優(yōu)先級。這也是很多學建網(wǎng)站新手迷糊的問題。舉個簡單的例子：

如果已經(jīng)把.polaris下面span內(nèi)的字體設(shè)置成紅色：

這時，如果要改變.beijixing的顏色為藍色，用下面的命令是不能實現(xiàn)的：

出現(xiàn)這種情況就是因為后一個命令的優(yōu)先級不夠，兩條相互沖突的樣式設(shè)置，瀏覽器只會執(zhí)行優(yōu)先級較高的那個。

那么選擇器的優(yōu)先級是怎么規(guī)定的呢？

一般而言，選擇器越特殊，它的優(yōu)先級越高。也就是選擇器指向的越準確，它的優(yōu)先級就越高。

通常我們用1表示標簽名選擇器的優(yōu)先級，用10表示類選擇器的優(yōu)先級，用100標示ID選擇器的優(yōu)先級。

比如上例當中 .polaris span {color:red;}的選擇器優(yōu)先級是 10 + 1 也就是11；而 .polaris 的優(yōu)先級是10；瀏覽器自然會顯示紅色的字。理解了這個道理之后下面的優(yōu)先級計算自是易如反掌：

• div.test1?.span?var?優(yōu)先級?1+10?+10?+1
• span#xxx?.songs?li?優(yōu)先級1+100?+?10?+?1
• #xxx?li?優(yōu)先級?100?+1

CSS選擇器的使用原則

對于什么情況下使用什么選擇器，用不同選擇器的原則是：

• 第一：準確的選到要控制的標簽；
• 第二：使用最合理優(yōu)先級的選擇器；
• 第三：HTML和CSS代碼盡量簡潔美觀。

學習更多網(wǎng)站制作知識，請學習網(wǎng)站制作培訓。

相關(guān)知識

• jQuery class選擇器
  (11082 次閱讀)
• jQuery 元素選擇器
  (11174 次閱讀)
• jQuery ID選擇器
  (11277 次閱讀)
• 第4節(jié)：CSS選擇器類型和樣式
  (15508 次閱讀)
• css3學習參考手冊
  (1585 次閱讀)

標簽： 代碼 建網(wǎng)站 網(wǎng)站制作 學建網(wǎng)站

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。