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

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

news 2025/11/14 11:20: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

网络编程（Modbus进阶）

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

编程新知 2025/11/13 15:03:43

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2025/11/12 15:12:42

23-Oracle 23 ai 区块链表（Blockchain Table）

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

编程新知 2025/11/10 4:41:42

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

编程新知 2025/10/7 4:57:55

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

编程新知 2025/11/8 6:47:51

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

编程新知 2025/11/12 3:23:23

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/9/5 21:18:15

如何在网页里填写 PDF 表格？

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

编程新知 2025/11/12 8:15:22

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

编程新知 2025/9/24 16:25:00

Linux部署私有文件管理系统MinIO

最近需要用到一个文件管理服务&#xff0c;但是又不想花钱&#xff0c;所以就想着自己搭建一个&#xff0c;刚好我们用的一个开源框架已经集成了MinIO&#xff0c;所以就选了这个 我这边对文件服务性能要求不是太高&#xff0c;单机版就可以 安装非常简单&#xff0c;几个命令就…...

编程新知 2025/11/9 17:17:45