CSS選擇器的優(yōu)先級(jí)對(duì)大家來(lái)說(shuō)并不陌生，下面動(dòng)力節(jié)點(diǎn)小編來(lái)給大家舉例說(shuō)明。

計(jì)算選擇器的特異性

選擇器的優(yōu)先級(jí)由選擇器的組合點(diǎn)決定。

樣式屬性 = a

選擇器中的 ID 屬性數(shù) = b

選擇器中其他屬性和偽類的數(shù)量 = c

選擇器中元素名稱和偽元素的數(shù)量 = d

例如，如果是以下選擇器的組合：

[索引.html]

<正文>
  <文章>
    <p>這是<span id="red">段落</span>。</p>
  </文章>
</正文>

[樣式.css]

文章 p 跨度{
   顏色：藍(lán)色；
 }
 ＃紅色的{
   紅色;
 }

“文章p跨度”是“ a=0, b=0, c=0, d=3 (0003) ”。

“#red”是“ a=0, b=1, c=0, d=0 (0100) ”。

在這種情況下，段落變?yōu)榧t色字符。因?yàn)?ldquo;#red(0100)”大于“article p span(0003)”。

例子

[索引.html]

<正文>
<div id="包裝器">
  <header id="頂部">
    <h1>W3C 咖啡館</h1>
    <div id="hright">
      <導(dǎo)航>
        <ul id="gnavi">
          <li>菜單</li>
          <li>位置</li>
          <li>關(guān)于我們</li>
          <li>招聘</li>
        </ul>
      </nav>
    </div>
  </標(biāo)題>
</div>
</正文>

[樣式.css]

#wrapper 標(biāo)題 div 導(dǎo)航 #gnavi{
  列表樣式類型：無(wú)；
}
#top #hright #gnavi{
  列表樣式類型：正方形；
}

在這種情況下，列表的標(biāo)記更改為“方形”。因?yàn)?ldquo;#top #hright #gnavi(a=0, b=3, c=0, d=0)”大于“#wrapper header div nav #gnavi(a=0, b=2, c=0, d=3)"。如果大家想了解更多相關(guān)知識(shí)，可以來(lái)關(guān)注一下動(dòng)力節(jié)點(diǎn)的CSS視頻教程，教程內(nèi)容由淺到深，通俗易懂，即使沒有基礎(chǔ)也能聽懂，很適合沒有基礎(chǔ)的朋友學(xué)習(xí)，希望對(duì)大家能夠有所幫助。