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

为什么元素显示的样式跟我设置的不一样？CSS优先级详解

news 2025/9/18 12:34:53

一、什么是CSS中的选择器优先级？

在CSS中，选择器优先级是指确定应用于元素的最相关CSS声明的算法。这个优先级决定了哪个样式规则将被应用到元素上。根据选择器的类型和特定性，CSS规定了不同的优先级，例如ID选择器比类选择器具有更高的优先级。在CSS中，选择器的优先级决定了最终应用到元素的样式。

二、选择器的优先级计算

1、根据CSS中的优先级规则，以下是选择器的优先级顺序：

!important > 内联样式 style > ID 选择器 > 伪类选择器 > 属性选择器 = class 选择器 > 伪元素 > 元素(类型)选择器 > 关系选择器 > 通配符选择器

这些所有的选择器都可以归为以下三种选择器：ID、CLASS和TYPE，它们对应三列值，分别表示选择器的三个权重类别。这三列由匹配元素的选择器中每个权重类别的选择器组件数量确定。优先级从高到低的顺序如下：

  1. ID列：只包括ID选择器，例如#example。对于匹配选择器中的每个ID，将1-0-0添加到权重值中。

  2. CLASS列：包括类选择器，例如.myClass，属性选择器，如[type=“radio”]和[type|=“fr”]，以及伪类，例如:hover、:nth-of-type(3n)和:required。对于匹配选择器中的每个类、属性选择器或伪类，将0-1-0添加到权重值中。

  3. TYPE列：包括类型选择器，例如p、h1和td，以及伪元素，例如::before、::placeholder和所有其他带有双冒号表示法的选择器。对于匹配选择器中的每个类型或伪元素，将0-0-1添加到权重值中。

2、计算权重

在计算权重时，通用选择器(*)和继承值的优先级为0，它们不影响优先级权重值。组合符号，例如+、>、~、空格和||，可能使选择器更具体，但不会增加优先级权重。

当具有相同优先级权重的竞争选择器时，将比较每列中的选择器组件数量，从左到右进行比较。如果ID列中的数字相同，则比较CLASS列，如果CLASS列中的数字也相同，则比较TYPE列。如果所有三列中的数字都相同，则最后声明的样式将具有优先权。

根据权重为样式设值：

  • 内联样式（权重值为1000）
  • ID选择器（权重值为100）
  • 类选择器、属性选择器和伪类选择器（权重值为10）
  • 元素选择器和伪元素选择器（权重值为1）

举个例子：

<!DOCTYPE html>
<html>
<head><style>p {color: red;} /* Specificity: 1 */.test {color: green;} /* Specificity: 10 */#demo {color: blue;} /* Specificity: 100 */</style>
</head>
<body><p id="demo" class="test" style="color: pink;">Hello World!</p>
</body>
</html>

在示例中，p元素应用了内联样式，ID选择器和类选择器。根据特定性算法，内联样式的权重值为1000，ID选择器的权重值为100，类选择器的权重值为10。因此，内联样式的权重值最高，所以文本颜色将是粉红色。

三、父子组件样式

在CSS中，当子元素定义了样式时，它的样式会覆盖继承来的样式，即使父元素样式的权重很高，被子元素继承时，子元素定义的样式会具有更高的优先级。这是因为在嵌套结构中，子元素的样式优先级会覆盖继承的样式。
即不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是子元素定义的样式会覆盖继承来的样式。

相关文章：

为什么元素显示的样式跟我设置的不一样？CSS优先级详解

一、什么是CSS中的选择器优先级&#xff1f; 在CSS中&#xff0c;选择器优先级是指确定应用于元素的最相关CSS声明的算法。这个优先级决定了哪个样式规则将被应用到元素上。根据选择器的类型和特定性&#xff0c;CSS规定了不同的优先级&#xff0c;例如ID选择器比类选择器具有更…...

编程日记 2024/3/25 1:28:12

C语言动态内存的管理

前言 本篇博客就来探讨一下动态内存&#xff0c;说到内存&#xff0c;我们以前开辟空间大小都是固定的&#xff0c;不能调整这个空间大小&#xff0c;于是就有动态内存&#xff0c;可以让我们自己选择开辟多少空间&#xff0c;更加方便&#xff0c;让我们一起来看看动态内存的有…...

编程日记 2024/3/25 1:27:11

CASIA数据集转png HWDB2.0-2.2

https://nlpr.ia.ac.cn/databases/handwriting/Home.html CASIA在线和离线中文手写数据库 https://nlpr.ia.ac.cn/databases/handwriting/Offline_database.html CASIA-HWDB2.0-2.2 离线文本数据库是由孤立字符数据集的作者制作的。每人撰写了五页给定文本。由于数据丢失&a…...

编程日记 2024/3/25 1:26:10

学习或复习电路的game推荐：nandgame(NAND与非门游戏)、Turing_Complete(图灵完备)

https://www.nandgame.com/ 免费 https://store.steampowered.com/app/1444480/Turing_Complete/ 收费&#xff0c;70元。据说可以导出 Verilog &#xff01;...

编程日记 2024/3/25 1:25:09

前端面试题《react》

说说React render方法的原理&#xff1f;在什么时候会被触发&#xff1f; render函数里面可以编写JSX&#xff0c;转化成createElement这种形式&#xff0c;用于生成虚拟DOM&#xff0c;最终转化成真实DOM 在 React 中&#xff0c;类组件只要执行了 setState 方法&#xff0c…...

编程日记 2024/3/25 1:24:08

快速入门Kotlin③类与对象

类 构造函数 主构造函数：主构造函数是类头的一部分，它跟在类名后面。主构造函数没有函数体，它可以包含初始化代码和属性声明。初始化块：init关键字修饰，它直接写在类体中。它的执行顺序与它们在类体中的出现顺序一致。 次构造函数：次要构造函数是可选的，用于提供额外…...

编程日记 2024/3/25 1:21:05

RUST：Arc (Atomic Reference Counted) 原子引用计数

在Rust编程语言中&#xff0c;Arc 是一个智能指针类型&#xff0c;全称为 "Atomic Reference Counted"&#xff08;原子引用计数&#xff09;。它的主要作用是提供线程安全的共享所有权机制&#xff0c;使得多个线程可以同时持有同一个数据结构的访问权&#xff0c;并…...

编程日记 2024/3/25 1:15:00

从0写一个问卷调查APP的第13天-1

1.今日任务 我也只是一个大学生&#xff0c;有什么思路不对的地方给我指出来哟! 分析&#xff1a;上次我们实现了任务调查的插入。但是我们插入的问卷调查只有它的标题&#xff0c;也就是这个问卷调查是什么我们告诉数据库了&#xff0c;但是现在我们还没有给它添加任何问题&…...

编程日记 2024/3/25 1:10:57

20.Python从入门到精通—参数 位置参数 关键字参数 默认参数 匿名函数 return 语句 强制位置参数

20.从入门到精通:参数 位置参数 关键字参数 默认参数 匿名函数 return 语句 强制位置参数 参数位置参数关键字参数默认参数 匿名函数return 语句强制位置参数 参数 在Python中&#xff0c;函数可以接受任意数量的参数&#xff0c;包括位置参数、关键字参数和默认参数。以下是这…...

编程日记 2024/3/25 1:08:55

Python爬虫之requests库

1、准备工作 pip install requests 2、实例 urllib库中的urlopen方法实际上就是以GET方式请求网页&#xff0c;requests库中相应的方法就是get方法。 import requestsr requests.get(https://www.baidu.com/) print(type(r)) # <class requests.models.Response> 响…...

编程日记 2024/3/25 1:07:54

鱼塘钓鱼(多路归并）

有 N 个鱼塘排成一排&#xff0c;每个鱼塘中有一定数量的鱼&#xff0c;例如&#xff1a;N5 时&#xff0c;如下表&#xff1a; 鱼塘编号12345第1分钟能钓到的鱼的数量 &#xff08;1…1000&#xff09;101420169每钓鱼1分钟钓鱼数的减少量&#xff08;1…100)24653当前鱼塘到…...

编程日记 2024/3/25 1:06:53

java每日一题——买啤酒(递归经典问题)

前言&#xff1a; 非常喜欢的一道题&#xff0c;经典中的经典。打好基础&#xff0c;daydayup!!!啤酒问题&#xff1a;一瓶啤酒2元&#xff0c;4个盖子可以换一瓶&#xff0c;2个空瓶可以换一瓶&#xff0c;请问10元可以喝几瓶 题目如下&#xff1a; 啤酒问题&#xff1a;一瓶…...

编程日记 2024/3/25 1:05:52

最近接到一个大项目，给公司设计抢商品代金劵业务

我们公司是做汽车金融方面的工作&#xff0c;在业内还挺大。目前单量来源于2&#xff0c;3线城市&#xff0c;随着大环境越老越差位了吸引他们&#xff0c; 公司决定给全国的客户&#xff0c;销售等发一些商品 1.总体学习了京东开源秒杀系统设计思路和方案。 我们公司决定进行…...

编程日记 2024/3/25 0:54:43

防火墙（讲解）

目录 1.防火墙是什么? 2.防火墙设备 3.防火墙功能 1)出色的控制能力&#xff0c;过滤掉不安全服务 2)过滤非法用户和访问特殊站点 3)它能够对网络存取和访问进行监控审计 4.防火墙的局限 (1)防火墙有可能是可以绕过的 (2)防火墙不能防止内部出卖性攻击或者内部误操作…...

编程日记 2024/3/25 0:53:42

Python之装饰器-带参装饰器

Python之装饰器-带参装饰器 带参装饰器 之后不是一个单独的标识符&#xff0c;是一个函数调用函数调用的返回值又是一个函数&#xff0c;此函数是一个无参装饰器带参装饰器&#xff0c;可以有任意个参数 func()func(1)func(1, 2) def add(x, y):"""函数说明&…...

编程日记 2024/3/25 0:51:40

抖音IP属地怎么更改

抖音是一个非常受欢迎的短视频平台&#xff0c;吸引了无数用户在上面分享自己的生活和才艺。然而&#xff0c;随着快手的火爆&#xff0c;一些用户开始担心自己的IP地址会被他人获取&#xff0c;引起个人隐私风险。那么&#xff0c;抖音用户又该如何更改到别的地方呢&#xff1…...

编程日记 2024/3/25 0:50:38

Flutter 全局控制底部导航栏和自定义导航栏的方法

1. 介绍 导航栏在移动应用中扮演着至关重要的角色&#xff0c;它是用户与应用之间进行导航和交互的核心组件之一。无论是简单的页面切换&#xff0c;还是复杂的应用导航&#xff0c;导航栏都能够帮助用户快速找到所需内容&#xff0c;提升用户体验和应用的易用性。 在移动应用…...

编程日记 2024/3/25 0:47:36

检索增强生成（RAG）技术：实现流程、作用及应用案例

一. RAG简介 在自然语言处理&#xff08;NLP&#xff09;领域中&#xff0c;检索增强生成&#xff08;Retrieval-Augmented Generation, RAG&#xff09;技术巧妙地结合了信息检索与神经网络生成模型的力量&#xff0c;通过在生成过程中引入相关的外部信息&#xff0c;实现了在…...

编程日记 2024/3/25 0:46:35

Ubuntu安装和使用

Ubuntu 安装和配置 修改下载源 打开软件与更新, 选择其它站点, 选择中国, 选择阿里云源 谷歌中文输入法配置 Ctrl Alt T打开终端, 执行下述命令下fcitx框架 输入密码进行安装 sudo apt-get install -y fcitx-googlepinyinWin呼出菜单, 选择语言支持, 第一次打开会显示语言…...

编程日记 2024/3/25 0:45:33

【Unity】Stream最好用的Selfhost开源轻量服务

【背景】 有好几种场景的投屏或者远控应用希望实现&#xff0c;无论用哪种方式&#xff0c;都绕不开如何构建服务这一关。 【分析】 外网有很多直接付费使用的信令传输类型或是提供流服务的服务器&#xff0c;但我的目标场景是断绝外网的局域网&#xff0c;而且付费也总觉得…...

编程日记 2024/3/25 0:42:30

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

编程新知 2025/9/10 11:07:10

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

编程新知 2025/7/27 12:13:59

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/9/5 12:16:40

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

编程新知 2025/9/2 8:07:37

Java求职者面试指南：计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

编程新知 2025/9/16 9:40:57

Java 与 MySQL 性能优化：MySQL 慢 SQL 诊断与分析方法详解

文章目录 一、开启慢查询日志&#xff0c;定位耗时SQL1.1 查看慢查询日志是否开启1.2 临时开启慢查询日志1.3 永久开启慢查询日志1.4 分析慢查询日志 二、使用EXPLAIN分析SQL执行计划2.1 EXPLAIN的基本使用2.2 EXPLAIN分析案例2.3 根据EXPLAIN结果优化SQL 三、使用SHOW PROFILE…...

编程新知 2025/7/24 5:10:25

基于江科大stm32屏幕驱动，实现OLED多级菜单（动画效果），结构体链表实现(独创源码)

引言 在嵌入式系统中&#xff0c;用户界面的设计往往直接影响到用户体验。本文将以STM32微控制器和OLED显示屏为例&#xff0c;介绍如何实现一个多级菜单系统。该系统支持用户通过按键导航菜单&#xff0c;执行相应操作&#xff0c;并提供平滑的滚动动画效果。 本文设计了一个…...

编程新知 2025/9/16 16:58:53

Linux入门课的思维导图

耗时两周&#xff0c;终于把慕课网上的Linux的基础入门课实操、总结完了&#xff01; 第一次以Blog的形式做学习记录&#xff0c;过程很有意思&#xff0c;但也很耗时。 课程时长5h&#xff0c;涉及到很多专有名词&#xff0c;要去逐个查找&#xff0c;以前接触过的概念因为时…...

编程新知 2025/9/2 16:41:11

vxe-table vue 表格复选框多选数据，实现快捷键 Shift 批量选择功能

vxe-table vue 表格复选框多选数据&#xff0c;实现快捷键 Shift 批量选择功能 查看官网&#xff1a;https://vxetable.cn 效果 代码 通过 checkbox-config.isShift 启用批量选中,启用后按住快捷键和鼠标批量选取 <template><div><vxe-grid v-bind"gri…...

编程新知 2025/9/9 10:00:20

多模态学习路线（2）——DL基础系列

目录 前言 一、归一化 1. Layer Normalization (LN) 2. Batch Normalization (BN) 3. Instance Normalization (IN) 4. Group Normalization (GN) 5. Root Mean Square Normalization&#xff08;RMSNorm&#xff09; 二、激活函数 1. Sigmoid激活函数&#xff08;二分类&…...

编程新知 2025/9/8 19:15:54