当前位置： 首页 > news >正文

CSS详细基础（五）选择器的优先级

news 2026/2/7 14:38:01

本节介绍选择器优先级，优先级决定了元素最终展示的样式~

浏览器是通过判断CSS优先级，来决定到底哪些属性值是与元素最为相关的，从而作用到该元素上。CSS选择器的合理组成规则决定了优先级，我们也常常用选择器优先级来合理控制元素达到我们理想的显示状态，下面我们来具体了解下CSS选择器优先级及权重。

目录

一.选择器优先级

1.层叠性

 2.继承性

3.优先级 

4.权重叠加

一.选择器优先级

1.层叠性

当一个元素被定义了两种相同的属性时，按照就近原则选取属性的取值~

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{color: red;font-size: 40px;}div{color: orange;}</style>
</head>
<body><div>心浮气躁乃大忌，希望你能一直铭记</div>
</body>
</html>

如上述代码，虽然div的color值被定义了两次，但是由于orange离得div更近（物理上），因此字体应该为橙色~

 2.继承性

如果子代选择器和它的父类选择器有相同的属性，则按照子类的取值呈现~

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{color: rgb(40, 47, 255);font-size: 40px;line-height: 1.5;}p{font-size: 20px;}div{/* 不继承body选择器的字体大小 */font-size: 10px;/* 但是继承行高的1.5倍属性 */}</style>
</head>
<body>男儿何不带吴钩，收取关山五十州<div>男儿何不带吴钩，收取关山五十州</div><p>男儿何不带吴钩，收取关山五十州</p>
</body>
</html>

如上代码段中，body中的文字被设置为40px ，p中的为20px而div中只有10div，子代的优先级逐级递减，而优先级也愈发增加~效果如下：

3.优先级 

CSS选择器的优先级按照以下顺序排列：!important > 内联选择器 > ID选择器 > 类别选择器 > 属性选择器 > 伪类 > 元素选择器 > 通配符选择器 > 继承选择器。如果有多个选择器作用在同一个元素上，浏览器会根据这个优先级顺序来确定应用哪个样式。

在上述优先级顺序中，important是最高优先级，它可以覆盖其他任何优先级的样式。紧接着是内联选择器，其次是ID选择器，然后是类别选择器、属性选择器、伪类、元素选择器、通配符选择器和继承选择器。

需要注意的是，如果两个选择器的优先级相同，那么最后出现的样式将会被应用。

判断下列文本的颜色？

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{color: red;font-size: 50px;}.yanse1{color: yellow;color:darkgrey}#yanse2{color: rgba(56, 227, 233, 0.815);}div{color: gold !important;}</style>
</head>
<body><div class="yanse1" id="yanse2" style="color: bisque;">你能猜出来我是什么颜色？</div>
</body>
</html>

没错，是金色~

4.权重叠加

CSS权重叠加是指当多个CSS声明应用于同一元素时，它们的权重值会叠加，决定最终应用的样式。权重的计算是根据选择器的类型和数量来确定的。常见的选择器类型按照优先级从高到低为：内联样式，ID选择器，类选择器，元素选择器和通配符选择器。在同一类型的选择器中，选择器的数量越多，权重值越高。

通俗的说，权重值是复合选择器之间优先级的对比~

计算公式大致由下列表格决定：

 选择器 权重计算
继承父标签的样式 , * 通配符选择器0,0,0,0
标签选择器0,0,0,1
类选择器，链接伪类选择器0,0,1,0
ID 选择器0,1,0,0
标签的行内样式 style 属性1,0,0,0
样式后添加 !important权重无穷大

需要注意的是，不同选择器之间的区别为量级，不存在进位的说法！ 

如下这段代码，包含了3种复合样式控制属性：

    <style>li{color: red;font-size: 50px;}ul li{color: blue;}.gold li{color: gold;}</style>
  • 第一个选择器的权值为：0,0,0,1
  • 第二个选择器的权值为：0,0,0,2
  • 第三个选择器的权值为：0,0,1,1

因此，文本的颜色应该为金色：

相关文章：

CSS详细基础（五）选择器的优先级

本节介绍选择器优先级&#xff0c;优先级决定了元素最终展示的样式~ 浏览器是通过判断CSS优先级&#xff0c;来决定到底哪些属性值是与元素最为相关的&#xff0c;从而作用到该元素上。CSS选择器的合理组成规则决定了优先级&#xff0c;我们也常常用选择器优先级来合理控制元素…...

编程日记 2023/9/30 3:38:47

LLM-TAP随笔——有监督微调【深度学习】【PyTorch】【LLM】

文章目录 5、 有监督微调5.1、提示学习&语境学习5.2、高效微调5.3、模型上下文窗口扩展5.4、指令数据构建5.5、开源指令数据集 5、 有监督微调 5.1、提示学习&语境学习 提示学习 完成预测的三个阶段&#xff1a;提示添加、答案搜索、答案映射 提示添加 “[X] 我感到…...

编程日记 2023/9/30 3:37:46

kafka伪集群部署，使用docker环境拷贝模式

线上启动容器的方式是复制容器的运行环境出来&#xff0c;然后进行运行脚本的形式 1&#xff1a;在home/kafka目录下创建如下目录 2&#xff1a;复制kafka1容器内的数据/bitnami/kafka/data&#xff0c;直接放在1992_data里面&#xff0c;同理,复制kafka2容器内的数据/bitnami/…...

编程日记 2023/9/30 3:36:44

工业交换机一般的价格是多少呢？

工业交换机是一种应用于工业领域的网络设备。它的性能和所有安全指标都比一般商业交换机更加稳定。所以&#xff0c;工业级交换机的价格相对于普通的交换机要稍稍昂贵一些。工业交换机一般的价格是多少呢&#xff1f;每个厂家的交换机价格是不是都一样呢&#xff1f; 首先&…...

编程日记 2023/9/30 3:33:42

QT使用前的知识

QT使用前的知识 常用的快捷键 源文件的内容解释 .pro文件的解释 头文件的解释 构建新的对象—组成对象树 槽函数 自定的信号和槽 槽函数的信号是一个重载函数时 电机按钮触发信号 调用无参数的信号 断开信号...

编程日记 2023/9/30 3:28:35

Unity制作旋转光束

Unity制作旋转光束 大家好&#xff0c;我是阿赵。 这是一个在很多游戏里面可能都看到过的效果&#xff0c;在传送门、魔法阵、角色等脚底下往上散发出一束拉丝形状的光&#xff0c;然后在不停的旋转。 这次来在Unity引擎里面做一下这种效果。 一、准备材料 需要准备的素材很简…...

编程日记 2023/9/30 3:27:34

考研王道强化阶段（二轮复习）“算法题”备考打卡表 记录

问题&#xff1a;做408真题_2010_42题&#xff0c;即王道书 2.2.3_大题_10 思路&#xff1a; 回头补 代码&#xff1a; int moveL(SqlList &L,SqlList &S,int p) {// 健壮性表达if( L.len 0 ){return 0;}// 调用另外一个顺序表存储pos前面的元素for( int i0;i<p;…...

编程日记 2023/9/30 3:25:30

UE4/5数字人MetaHuman通过已有动画进行修改

目录 通过已有动画修改动画 开始制作 创建一个关卡序列 将动画序列烘焙到控制绑定 打开我们自己创建的动画序列 之后便是烘焙出来 通过已有动画修改动画 首先架设我们已经有相关的MetaHuman的动画&#xff0c;但是这个动画因为是外部导入进来的&#xff0c;所以可能会出…...

编程日记 2023/9/30 3:21:24

在Mac M2本地注册GitLab runner

最近在搞公司的CI/CD&#xff0c;简单记录下部分过程 安装runner sudo curl --output /usr/local/bin/gitlab-runner "https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-darwin-arm64" 创建runner 这个步骤需要在gitlab中进行&am…...

编程日记 2023/9/30 3:17:18

「大数据-2.2」使用命令操作HDFS文件系统

目录 一、HDFS文件系统基本信息 1. HDFS的路径表达形式 2.HDFS和Linux的根目录的区分 二、 使用命令操作HDFS文件系统 0. Hadoop的两套命令体系 1. 创建文件夹 2. 查看指定目录下内容 3. 上传文件到HDFS指定目录下 4. 查看HDFS文件内容 5. 下载HDFS文件 6. 拷贝HDFS文件 7.…...

编程日记 2023/9/30 3:16:16

面试买书复习就能进大厂？

大家好&#xff0c;我是苍何。 现在进大仓是越来越难了&#xff0c;想通过简单的刷题面试背书&#xff0c;比几年前难的不少&#xff0c; 但也并非毫无希望&#xff0c;那究竟该如何准备才能有希望进大厂呢&#xff1f; 我总结了 4 点&#xff1a; 1、不差的学历背景 2、丰富…...

编程日记 2023/9/30 3:13:12

使用Http Interface客户端解析text/html类型参数

前言 Spring6和Spring Boot3的正式发布也有一段时间了&#xff0c;最低支持的java版本也是直接跳到了17。而且最近java21也出来了&#xff0c;作为一个javaer&#xff0c;你不会还在坚守java8吧&#xff1f; Http Interface是Spring6新推出的一个声明式http客户端&#xff0c;…...

编程日记 2023/9/30 3:12:11

Linux - linux命令进阶

打包压缩解压 基本概述 打包 将多数文件或目录汇总成一个整体 打包默认没有压缩功能&#xff0c;不节省磁盘空间 压缩 将大文件压缩成小文件 可以节省磁盘空间 打包压缩 将一堆零散的文件打包到一起&#xff0c;然后再压缩&#xff0c;可以节省磁盘空间 打包命令 命令格式 ta…...

编程日记 2023/9/30 3:11:10

排序篇(一)----插入排序

1.直接插入排序 插入排序的思想: 把待排序的记录按其关键码值的大小逐个插入到一个已经排好序的有序序列中&#xff0c;直到所有的记录插入完为止&#xff0c;得到一个新的有序序列 。 你可以想像成打牌一样,比如说斗地主,一张一张的摸牌,然后把手上的这些牌变成手续的排列.…...

编程日记 2023/9/30 3:08:06

通俗讲解深度学习轻量网络MobileNet-v1/v2/v3

MobileNet网络是由google团队在2017年提出的&#xff0c;专注于移动端或者嵌入式设备中的轻量级CNN网络。相比传统卷积神经网络&#xff0c;在准确率小幅降低的前提下大大减少模型参数与运算量。(相比VGG16准确率减少了0.9%&#xff0c;但模型参数只有VGG的1/32)。MobileNet网络…...

编程日记 2023/9/30 3:07:05

mmpretrain学习笔记

深度学习模型的训练涉及几个方面 1、模型结构&#xff1a;模型有几层、每层多少通道数等 2、数据&#xff1a;数据集划分、数据文件路径、批大小、数据增强策略等 3、训练优化 &#xff1a;梯度下降算法、学习率参数、训练总轮次、学习率变化策略等 4、运行时&#xff1a;GPU、…...

编程日记 2023/9/30 3:06:03

rhel8 网络操作学习

一、查询dns服务器地址汇总 1.查询dns服务器地址&#xff1a; &#xff08;1&#xff09;方法一&#xff1a;执行命令 cat /etc/resolv.conf 执行结果如下&#xff1a; nameserver后面就是dns服务器的ip地址。 &#xff08;2&#xff09;方法2&#xff1a;查看/etc/syscon…...

编程日记 2023/9/30 3:03:00

有车型(CarModel)，车厂（CarFactory），经销商(Distributor)三个表

用drf编写 1 有车型(CarModel)&#xff0c;车厂&#xff08;CarFactory&#xff09;&#xff0c;经销商(Distributor)三个表, 一个车厂可以生产多种车型&#xff0c;一个经销商可以出售多种车型&#xff0c;一个车型可以有多个经销商出售车型&#xff1a;车型名&#xff0c;车型…...

编程日记 2023/9/30 2:58:55

Python函数：chr()和ord()

两个函数是基于Unicode编码表进行进行字符与字码之间的转换。 chr()函数是通过字码转换成字符: 如图,坐标(1,4e10)丑 使用chr需要线将坐标相加得到&#xff1a;4e11 chr默认传入10进制的字码. 如图是各进制的字码。 也可以传入其他进制&#xff0c;不过需要在前面传入的参数最前…...

编程日记 2023/9/30 2:57:54

flink sql 使用

1.准备工作 安装flink 1.16.2 将以下jar包放到/data/cmpt/flink-1.16.2/lib 目录下 antlr-runtime-3.5.2.jar flink-connector-hive_2.12-1.16.2.jar flink-connector-jdbc-1.16.2.jar mysql-connector-java-6.0.6.jar hive-exec-3.1.3.jar libfb303-0.9.3.ja…...

编程日记 2023/9/30 2:54:50

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

编程新知 2025/10/6 4:03:40

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

编程新知 2025/10/1 22:26:06

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

编程新知 2026/1/28 5:43:51

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

编程新知 2025/12/13 22:42:30

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2026/2/1 6:36:36

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

编程新知 2025/12/2 3:35:50

WPF八大法则：告别模态窗口卡顿

⚙️ 核心问题&#xff1a;阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程&#xff0c;导致后续逻辑无法执行&#xff1a; var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题&#xff1a…...

编程新知 2026/1/26 17:26:03

6️⃣Go 语言中的哈希、加密与序列化：通往区块链世界的钥匙

Go 语言中的哈希、加密与序列化：通往区块链世界的钥匙 一、前言：离区块链还有多远？ 区块链听起来可能遥不可及，似乎是只有密码学专家和资深工程师才能涉足的领域。但事实上，构建一个区块链的核心并不复杂，尤其当你已经掌握了一门系统编程语言，比如 Go。 要真正理解区…...

编程新知 2025/10/12 1:37:40

Windows电脑能装鸿蒙吗_Windows电脑体验鸿蒙电脑操作系统教程

鸿蒙电脑版操作系统来了&#xff0c;很多小伙伴想体验鸿蒙电脑版操作系统&#xff0c;可惜&#xff0c;鸿蒙系统并不支持你正在使用的传统的电脑来安装。不过可以通过可以使用华为官方提供的虚拟机&#xff0c;来体验大家心心念念的鸿蒙系统啦&#xff01;注意&#xff1a;虚拟…...

编程新知 2026/2/6 2:33:44

数据库——redis

一、Redis 介绍 1. 概述 Redis&#xff08;Remote Dictionary Server&#xff09;是一个开源的、高性能的内存键值数据库系统&#xff0c;具有以下核心特点&#xff1a; 内存存储架构&#xff1a;数据主要存储在内存中&#xff0c;提供微秒级的读写响应 多数据结构支持&…...

编程新知 2025/11/17 12:44:07