CSS選擇器的優先級對大家來說并不陌生，下面動力節點小編來給大家舉例說明。

計算選擇器的特異性

選擇器的優先級由選擇器的組合點決定。

樣式屬性 = a

選擇器中的 ID 屬性數 = b

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

選擇器中元素名稱和偽元素的數量 = d

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

[索引.html]

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

[樣式.css]

文章 p 跨度{
   顏色：藍色；
 }
 ＃紅色的{
   紅色;
 }

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

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

在這種情況下，段落變為紅色字符。因為“#red(0100)”大于“article p span(0003)”。

例子

[索引.html]

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

[樣式.css]

#wrapper 標題 div 導航 #gnavi{
  列表樣式類型：無；
}
#top #hright #gnavi{
  列表樣式類型：正方形；
}

在這種情況下，列表的標記更改為“方形”。因為“#top #hright #gnavi(a=0, b=3, c=0, d=0)”大于“#wrapper header div nav #gnavi(a=0, b=2, c=0, d=3)"。如果大家想了解更多相關知識，可以來關注一下動力節點的CSS視頻教程，教程內容由淺到深，通俗易懂，即使沒有基礎也能聽懂，很適合沒有基礎的朋友學習，希望對大家能夠有所幫助。