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

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

news 2026/2/9 3:12:28

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

＜6＞-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

编程新知 2025/12/11 18:28:17

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

编程新知 2025/12/6 22:50:48

spring：实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

编程新知 2025/11/25 22:46:30

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

编程新知 2025/9/9 5:38:23

企业如何增强终端安全？

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

编程新知 2026/1/29 9:14:58

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2026/1/4 21:36:42

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

编程新知 2026/2/6 21:43:26

MySQL 知识小结（一）

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

编程新知 2026/1/26 13:29:47

Linux 中如何提取压缩文件 ？

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

编程新知 2026/2/1 5:38:25

Python训练营-Day26-函数专题1：函数定义与参数

题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一个名为 calculate_circle_area 的函数&#xff0c;该函数接收圆的半径 radius 作为参数&#xff0c;并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求&#xff1a;函数接收一个位置参数 radi…...

编程新知 2026/1/31 0:07:38