CSS选择器的优先级示例 - 极悦
专注Java教育14年 全国咨询/投诉热线:444-1124-454
极悦LOGO图
始于2009,口口相传的Java黄埔军校
首页 hot资讯 CSS选择器的优先级示例

CSS选择器的优先级示例

更新时间:2022-04-06 10:24:32 来源:极悦 浏览745次

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

提交申请后,顾问老师会电话与您沟通安排学习

免费课程推荐 >>
技术文档推荐 >>