CSS选择器的优先级示例

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视频教程，教程内容由浅到深，通俗易懂，即使没有基础也能听懂，很适合没有基础的朋友学习，希望对大家能够有所帮助。