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

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

news 2026/2/9 11:31:37

一、什么是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

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2026/1/21 9:20:07

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

编程新知 2026/1/29 10:22:28

Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

编程新知 2026/1/30 0:09:51

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/10/28 15:02:57

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2026/2/9 1:38:05

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

编程新知 2025/10/19 5:14:05

Java入门学习详细版（一）

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/12/14 14:47:02

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

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

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行&#xff1a; rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu ​ 2、Hello World fn main() { println…...

编程新知 2026/2/2 3:59:34

uniapp 集成腾讯云 IM 富媒体消息（地理位置/文件）

UniApp 集成腾讯云 IM 富媒体消息全攻略&#xff08;地理位置/文件&#xff09; 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型&#xff0c;核心实现方式&#xff1a; 标准消息类型&#xff1a;直接使用 SDK 内置类型&#xff08;文件、图片等&#xff09;自…...

编程新知 2025/10/25 5:53:05