CSS优先级计算的规则

CSS的优先级计算规则(CSS specificity calculation)是用来决定在多个CSS规则中哪个具有更高的优先级的计算方式。以下是优先级计算的规则:

  1. 选择器分配的优先级值,每个选择器都有自己的优先级值。

    • 对于一个选择器来说,ID选择器 的优先级最高,它的优先级值为100
    • 对于一个选择器来说,class选择器属性选择器伪类 的优先级值为10
    • 对于一个选择器来说,标签选择器伪元素 的优先级值为1
    • 所有选择器的优先级都小于任何具有 !important 声明的属性。
  2. 如果两个或多个选择器的优先级值相等,则可以根据下列规则判断哪个规则更具体并优先应用:

    • 如果选择器中包含了一个ID选择器,则此选择器更具体。
    • 如果选择器中包含了一个class选择器/属性选择器/伪类,则此选择器更具体。
    • 如果选择器中包含了一个标签选择器/伪元素,则此选择器更具体。
    • 如果选择器中包含了多个相同类型的选择器,则优先级相等,最内层的选择器最具体。
  3. 计算完所有选择器的优先级值之后,将所有选择器的优先级值加起来,得到它们的总优先级。

  4. 如果两个或多个规则的总优先级相等,则后面的规则将覆盖前面的规则。

以下是两个基于优先级计算的示例:

<!DOCTYPE html>
<html>
<head>
<style>
  /* 第一个选择器:ID选择器具有最高级别的优先级 */
  #first {
    color: red;
  }
  /* 第二个选择器:选择器中包含ID选择器, 2个class选择器及一个属性选择器,总优先级为122 */
  .second div#first.red.orange[type='submit'] {
    color: blue; 
  }
</style>
</head>
<body>
  <div id="first" class="red orange">First Text</div> 
  <div class="second">
    <div id="first" class="red orange">
      Second Text with blue color
    </div>
  </div>
</body>
</html>

根据上面的代码,第二个div元素将具有 Second Text with blue color 文本,因为 .second div#first.red.orange[type='submit'] 的优先级比 #first 更高。

<!DOCTYPE html>
<html>
<head>
<style>
  #id1 {
    color: red; 
  }
  .class1 {
    color: green; 
  }
  div {
    color: blue; 
  }
</style>
</head>
<body>
  <div id="id1" class="class1">Text</div>
</body>
</html>

在上例中,元素<div>的文本变为 blue,因为选择器 div 的优先级比 #id1.class1 的优先级都低,所以先应用了 color: blue

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:CSS优先级计算的规则 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • CSS:Table-cell属性的妙用让div也能享受table定位的好处

    CSS中的table-cell属性是一个非常好用的属性,它可以让div元素也能够享受到table元素的一些优势。下面,我们就来详细讲解一下如何使用table-cell属性实现类似table定位的效果。 什么是table-cell属性 table-cell属性是CSS中的一种布局属性,它用于将元素以表格单元格的形式进行排列,从而达到类似table定位的效果。它…

    css 2023年6月9日
    00
  • Vue中动画与过渡的使用教程

    Vue中动画与过渡的使用教程 Vue中动画与过渡的使用可以让网页效果更加流畅自然,提高用户体验。本教程将讲解Vue中动画与过渡的使用方法。 过渡 过渡是元素从一种样式变成另一种样式的效果,在Vue中,可以通过transition组件来实现过渡效果。 基本用法 在<transition>标签中添加要过渡的元素,使用name属性指定过渡效果的名字,然…

    css 2023年6月10日
    00
  • Bootstrap CSS布局之代码

    我们来详细讲解一下Bootstrap CSS布局之代码的完整攻略。 什么是Bootstrap Bootstrap是一个流行的CSS框架,旨在使响应式设计和前端开发变得更加容易。它是由Twitter开发的,现在已经成为了一个由全球社区维护的开源项目。 Bootstrap主要提供了很多巧妙的CSS布局、JavaScript插件、表单控件、图标、字体等常用界面组件…

    css 2023年6月11日
    00
  • 使用display:inline-block居中没有宽度的元素

    当一个元素垂直方向完全居中,并且这个元素自身没有固定宽度的时候,可以使用display:inline-block属性以及text-align:center属性来实现。 步骤如下: 1.将要居中的元素设置为inline-block元素,并且设置vertical-align: middle属性,使其垂直方向居中。同时将父级元素设置为text-align: cen…

    css 2023年6月9日
    00
  • 基于Vue制作组织架构树组件

    下面我将详细讲解基于Vue制作组织架构树组件的完整攻略。 1. 确定数据结构 在制作组织架构树组件之前,首先需要确定组件所需的数据结构。通常,我们可以使用树形结构来表示组织架构。在Vue中可以使用以下数据结构: [ { id: 1, name: ‘CEO’, children: [ { id: 2, name: ‘VP1’, children: [ { id…

    css 2023年6月10日
    00
  • HTML中div嵌套div的margin不起作用的解决方法

    问题描述: 在HTML中,我们往往需要使用div嵌套div来进行页面布局。但是有时候,我们会发现,对外层div设置margin无效,原因是内层div的margin影响了外层div的margin。那么如何解决这个问题呢? 解决方法: 使用padding代替margin 我们可以对外层div设置padding来代替margin,这样就可以消除内层div对外层di…

    css 2023年6月10日
    00
  • 详细了解CSS中的class与id区别及用法

    在 CSS 中,class 和 id 是两个常用的选择器,用于选择 HTML 元素并为其应用样式。下面是一个完整攻略,包含了如何了解 CSS 中的 class 和 id 的区别及用法的过程和两个示例说明。 class 和 id 的区别 class class 是一种用于标识 HTML 元素的选择器。它可以被多个元素使用,并且一个元素可以拥有多个 class。…

    css 2023年5月18日
    00
  • 怎么用纯CSS制作带小三角的tooltip提示框

    以下是关于“怎么用纯CSS制作带小三角的tooltip提示框”的完整攻略。 步骤一:HTML 结构 首先,需要在 HTML 文件中定义一个元素,用于触发 tooltip 提示框的显示。以下是示例: <div class="tooltip-trigger">Hover me</div> 上述代码中,<div&g…

    css 2023年5月18日
    00
合作推广
合作推广
分享本页
返回顶部