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日

相关文章

  • !DOCTYPE声明对JavaScript的影响分析

    当浏览器解析HTML文档时,会按照指定的文档类型解析并显示内容。在HTML文档开头处,通常会使用<!DOCTYPE>声明来指定文档类型。这个声明告诉浏览器如何正确解析HTML文档,并影响到文档中JavaScript代码的执行效果。 下面是DOCTPYE声明的两种常见方式: <!DOCTYPE html> <!DOCTYPE ht…

    css 2023年6月10日
    00
  • 实现点击按钮后CSS加载效果的实现

    为了实现点击按钮后CSS加载效果的实现,可以使用以下步骤: 定义需要加载的CSS样式:创建一个CSS文件,添加需要加载的CSS样式,并保存至项目文件夹中。在此示例中,我们将采用一个简单的例子,定义一个类 active,并将其的 background-color 属性改为红色。 .active { background-color: red; } 创建HTML…

    css 2023年6月10日
    00
  • 详解HTML的 标签及其禁用方法

    接下来我详细讲解一下“详解HTML的 标签及其禁用方法”。 什么是标签? <input>标签是用于在网页中接收用户输入的标签,常用于表单中,可输入各种类型的数据。该标签有多种属性,可用于设置不同的输入类型、限制输入格式、设置默认值等。 标签有哪些常用属性? 以下是<input>标签的常用属性及其作用: type:设置不同的输入类型; …

    css 2023年6月10日
    00
  • React+高德地图实时获取经纬度,定位地址

    如何结合React和高德地图实现实时获取地理位置信息,并且确定具体地址信息呢?本文将为大家分享一份完整的攻略,包括安装和配置环境、引入高德地图SDK、编写代码等。 环境配置 在开始项目之前,需要确保你已经安装了Node.js和npm。如果没有安装,Node.js官网提供了相应的下载。 在安装Node.js之后,我们通过以下命令检查npm是否成功安装: npm…

    css 2023年6月10日
    00
  • CSS清除浮动的常用方法优缺点分析

    CSS中的浮动是一种常见的布局方式,但有时候也可能会出现浮动元素导致父容器高度塌陷的问题。这时候就需要使用清除浮动的方法。 本文将详细讲解CSS清除浮动的常用方法优缺点分析,并提供两个示例说明。 一、清除浮动的常用方法 1. 空div清除浮动 这是最传统的清除浮动方式,通过在浮动元素末尾添加一个空div,并在CSS中为该div设置clear属性,从而达到清除…

    css 2023年6月10日
    00
  • HTML+CSS+JS模仿win10亮度调节效果的示例代码

    让我们来详细讲解如何实现“HTML+CSS+JS模仿win10亮度调节效果的示例代码”。 该示例主要需要三个部分来实现:HTML、CSS和JS。我们将通过以下步骤来实现它: 创建HTML文件并添加必要的结构。此处我们需要一个大容器,用于容纳中央的亮度控件。 <div class="container"> <div cla…

    css 2023年6月10日
    00
  • CSS教程(1):学习CSS背景相关知识

    下面是详细讲解“CSS教程(1):学习CSS背景相关知识”的完整攻略。 标题 CSS教程(1):学习CSS背景相关知识 概述 本教程将带领读者深入学习CSS中与背景相关的知识,包括背景颜色、背景图片以及背景定位等内容。 具体内容 1. 背景颜色 在CSS中,可以通过background-color属性来设置背景颜色。该属性可以接受任何有效的CSS颜色值。 示…

    css 2023年6月9日
    00
  • css3 盒模型以及box-sizing属性全面了解

    CSS3 盒模型以及 box-sizing 属性全面了解 盒模型是CSS中用于布局和设计的基本概念,它将文档中的每个元素抽象化为一个矩形的盒子,包括四个部分:内边距区域(padding)、边框区域(border)、内容区域(content)和外边距区域(margin)。而CSS3盒模型包括两种标准:W3C盒模型和IE盒模型,它们在计算width和height…

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