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

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

news 2026/2/8 8:10:44

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

浏览器是通过判断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

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2026/2/8 1:22:58

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

编程新知 2025/11/14 3:06:30

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

编程新知 2026/1/26 21:34:05

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2026/2/7 17:29:24

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

编程新知 2026/1/25 11:13:37

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

编程新知 2026/1/31 6:09:20

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

编程新知 2025/12/5 3:38:11

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2026/2/5 4:21:48

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/9/9 8:40:47

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

编程新知 2026/1/25 14:15:52