CSS選擇器種類

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

• 標(biāo)簽名選擇器
• 類選擇器
• ID選擇器

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

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

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

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

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

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

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

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

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

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

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

CSS選擇器的使用原則

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

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

學(xué)習(xí)更多網(wǎng)站制作知識(shí)，請(qǐng)學(xué)習(xí)網(wǎng)站制作培訓(xùn)。

相關(guān)知識(shí)

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

標(biāo)簽： 代碼 建網(wǎng)站 網(wǎng)站制作 學(xué)建網(wǎng)站

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