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

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

news 2026/2/8 20:20:13

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

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

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2026/2/8 4:37:24

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2026/2/8 4:37:03

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

编程新知 2026/1/31 6:18:08

大语言模型如何处理长文本？常用文本分割技术详解

为什么需要文本分割？ 引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...

编程新知 2025/11/18 0:32:13

DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

编程新知 2026/2/3 8:13:35

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2026/1/31 6:12:22

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

编程新知 2026/2/1 3:12:03

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2026/1/30 16:24:23

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

编程新知 2026/1/23 7:56:54

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

编程新知 2026/2/7 5:16:05