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

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

news 2025/6/21 13:07:03

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

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程新知 2025/6/19 4:37:30

IGP（Interior Gateway Protocol，内部网关协议）

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

编程新知 2025/6/17 18:14:19

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2025/6/15 17:22:58

《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

编程新知 2025/6/21 9:17:21

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2025/6/21 8:05:45

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

编程新知 2025/6/15 22:04:17

NLP学习路线图（二十三）：长短期记忆网络（LSTM）

在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN） 曾被视为…...

编程新知 2025/6/17 21:15:13

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2025/6/21 0:45:50

是否存在路径（FIFOBB算法）

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

编程新知 2025/6/15 21:35:34

Python 实现 Web 静态服务器（HTTP 协议）

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...

编程新知 2025/6/17 17:51:37