css中选择器的优先级

CSS 的优先级是由选择器的特指度(Specificity)和重要性(Importance)决定的,以下是优先级规则:
特指度:
-
ID 选择器 (#id): 每个ID选择器计为100。
-
类选择器 (.class)、属性选择器 ([attr]) 和伪类选择器 (:hover, :focus 等): 每个此类选择器计为10。
-
元素选择器 (p, div, span 等) 和伪元素选择器 (::before, ::after 等): 每个元素或伪元素选择器计为1。
优先级计算是将所有类型的选择器的分数相加。例如,#header .nav-link 的特指度就是 100 + 10 = 110。
样式来源顺序:
-
行内样式(内联样式):通过HTML元素的
style属性直接定义的样式具有最高的特指度,除非遇到!important规则。 -
内部样式表(在
<style>标签中定义的样式)。 -
外部样式表(通过
<link>标签引入的样式表)。 -
浏览器默认样式。
当两个规则特指度相同时,最后定义的规则会覆盖之前的规则(就近原则)。
重要性:
-
!important规则:当一个声明后面跟有!important,它会覆盖任何其他相同属性且没有!important的声明,无论其特指度如何。
总结来说,按照优先级从高到低排序如下:
-
行内样式(
style=""),带有!important或不带 -
ID 选择器 (
#id) 带有或不带!important -
类选择器、属性选择器、伪类选择器等带有或不带
!important -
元素选择器、伪元素选择器带有或不带
!important -
最后定义的同优先级规则(对于非
!important规则)
在实际应用中,尽量避免滥用 !important,因为它会降低代码可维护性和可预测性。
通常情况下,合理使用选择器以及遵循良好的层叠规则即可解决大部分样式冲突问题。
详细的示例说明
CSS样式优先级是由选择器的类型和特指度决定的,以下是一个详细的示例说明:
内联样式(行内样式):
<p style="color: red;">这是一个红色段落</p>
在这个例子中,<p>元素的颜色被设置为红色,由于样式直接写在了元素的style属性中,所以其优先级最高。
ID 选择器:
#myPara {color: blue;
}
<p id="myPara">如果这个段落有id='myPara',则应该是蓝色</p>
ID选择器(如#myPara)具有较高的优先级。在上述代码中,如果有其他不那么具体的样式试图改变段落颜色,但该段落有ID且通过ID选择器设置了颜色,则最终颜色将是蓝色。
类选择器、属性选择器和伪类选择器:
.important {color: green;
}
<p class="important">这是一个绿色段落,因为它应用了重要类</p>
类选择器(.important)的优先级高于标签选择器。因此,即使其他地方定义了对所有<p>元素的文本颜色,带有class="important"的段落将显示为绿色。
标签选择器和伪元素选择器:
p {color: black;
}
这里所有的<p>元素默认颜色是黑色。但是,如果前面的例子中的任一更高优先级的选择器也作用于<p>元素,它们会覆盖这个标签选择器的效果。
!important 规则:
p {color: yellow !important;
}
当 !important 修饰符用于某个声明时,它会提升该声明的优先级,使其高于其他任何非!important声明,即使是更具体的选择器。所以在上面的例子中,尽管之前可能有其他优先级更高的选择器设置了颜色,但加上!important后,<p>元素将以黄色显示。
总结来说,按照优先级从高到低排序如下:
-
行内样式(
style="") -
ID选择器 (
#id) -
类选择器、属性选择器、伪类选择器 (
.[class],[attr],:hover, 等) -
标签选择器、伪元素选择器 (
p,div,:before, 等) -
!important声明可以应用于以上任意选择器,并强制提升其优先级
当多个规则同时应用于一个元素时,优先级高的规则生效。
如果两个选择器具有相同特指度(例如两个类选择器),则根据CSS文件或样式表加载顺序来确定(后来加载的样式通常会覆盖先前加载的同优先级样式)。

相关文章:
css中选择器的优先级
CSS 的优先级是由选择器的特指度(Specificity)和重要性(Importance)决定的,以下是优先级规则: 特指度: ID 选择器 (#id): 每个ID选择器计为100。 类选择器 (.class)、属性选择器 ([attr]) 和伪…...
python3字符串内建方法split()心得
python3字符串内建方法split()心得 概念 用指定分隔符(默认是任何空白字符)将字符串拆分成列表。 语法 string.split(separator.max) 参数1.split(参数2,参数3) 参数1:string 字符串,需要被拆分的字符串。 参数2&a…...
html的列表标签
列表标签 列表在html里面经常会用到的,主要使用来布局的,使其整齐好看. 无序列表 无序列表[重要]: ul ,li 示例代码1: 对应的效果: 无序列表的属性 属性值描述typedisc,square,…...
【Pytorch深度学习开发实践学习】B站刘二大人课程笔记整理lecture04反向传播
lecture04反向传播 课程网址 Pytorch深度学习实践 部分课件内容: import torchx_data [1.0,2.0,3.0] y_data [2.0,4.0,6.0] w torch.tensor([1.0]) w.requires_grad Truedef forward(x):return x*wdef loss(x,y):y_pred forward(x)return (y_pred-y)**2…...
PyTorch使用Tricks:学习率衰减 !!
文章目录 前言 1、指数衰减 2、固定步长衰减 3、多步长衰减 4、余弦退火衰减 5、自适应学习率衰减 6、自定义函数实现学习率调整:不同层不同的学习率 前言 在训练神经网络时,如果学习率过大,优化算法可能会在最优解附近震荡而无法收敛&#x…...
10MARL深度强化学习 Value Decomposition in Common-Reward Games
文章目录 前言1、价值分解的研究现状2、Individual-Global-Max Property3、Linear and Monotonic Value Decomposition3.1线性值分解3.2 单调值分解 前言 中心化价值函数能够缓解一些多智能体强化学习当中的问题,如非平稳性、局部可观测、信用分配与均衡选择等问题…...
2 Nacos适配达梦数据库实现方案
1、修改源代码方式 Nacos 原生是不支持达梦数据库的,所以就要想办法让它 “支持”,因为是开源软件,我们可以从源码入手,在流行的 1.x 、2.x 或最新版本代码的基本上进行修改。 主要涉及到以下内容的修改: com/alibaba/nacos/persistence/datasource/ExternalDataS...
【Gitea】配置 Push To Create
引 在 Git 代码管理工具使用过程中,经常需要将一个文件夹作为仓库上传到一个未创建的代码仓库。如果 Git 服务端使用的是 Gitea,通常会推送失败。 PS D:\tmp\git-test> git remote add origin http://192.1.1.1:3000/root/git-test.git PS D:\tmp\g…...
关于postgresql数据库单独设置某个用户日志级别(日志审计)
前言: 很多时候我们想让数据库日志打印详细一点,但是又担心会对数据库本身产生一些不可控的影响,还会担心数据库产生的庞大的日志导致主机资源不太够用的影响。那么今天我们就通过讲解给单个用户设置 log_statement来解决以上这些问题。 注…...
阿里云ECS香港服务器性能强大、cn2高速网络租用价格表
阿里云香港服务器中国香港数据中心网络线路类型BGP多线精品,中国电信CN2高速网络高质量、大规格BGP带宽,运营商精品公网直连中国内地,时延更低,优化海外回中国内地流量的公网线路,可以提高国际业务访问质量。阿里云服务…...
实战打靶集锦-025-HackInOS
文章目录 1. 主机发现2. 端口扫描3. 服务枚举4. 服务探查5. 提权5.1 枚举系统信息5.2 探索一下passwd5.3 枚举可执行文件5.4 查看capabilities位5.5 目录探索5.6 枚举定时任务5.7 Linpeas提权 靶机地址:https://download.vulnhub.com/hackinos/HackInOS.ova 1. 主机…...
list.stream().forEach()和list.forEach()的区别
list.stream().forEach() 和 list.forEach() 在 Java 中都是用于遍历集合元素的方法,但它们在使用场景和功能上有所不同: list.forEach(): 是从 Java 8 开始引入到 java.util.List 接口的标准方法。直接对列表进行迭代,它采用内部…...
JS基础之JSON对象
JS基础之JSON对象 目录 JS基础之JSON对象对象转JSON字符串JSON转JS对象 对象转JSON字符串 JSON.stringify(value,replacer,space) value:要转换的JS对象 replacer:(可选)用于过滤和转换结果的函数或数组 space:(可选)指定缩进量 // 创建JS对象 let date {name:"张三…...
嵌入式学习之Linux入门篇——使用VMware创建Unbuntu虚拟机
目录 主机硬件要求 VMware 安装 安装Unbuntu 18.04.6 LTS 新建虚拟机 进入Unbuntu安装环节 主机硬件要求 内存最少16G 硬盘最好分出一个单独的盘,而且最少预留200G,可以使用移动固态操作系统win7/10/11 VMware 安装 版本:VMware Works…...
大模型中的token是什么?
定义 大模型的"token"是指在自然语言处理(NLP)任务中,模型所使用的输入数据的最小单元。这些token可以是单词、子词或字符等,具体取决于模型的设计和训练方式。 大模型的token可以是单词级别的,也可以是子…...
跳表是一种什么样的数据结构
跳表是有序集合的底层数据结构,它其实是链表的一种进化体。正常链表是一个接着一个用指针连起来的,但这样查找效率低只有O(n),为了解决这个问题,提出了跳表,实际上就是增加了高级索引。朴素的跳表指针是单向的并且元素…...
【刷题记录】最大公因数,最小公倍数(辗转相除法、欧几里得算法)
本系列博客为个人刷题思路分享,有需要借鉴即可。 1.题目链接: 无 2.详解思路: 题目描述:输入两个正整数,输出其最大公因数和最小公倍数 一般方法:最大公因数:穷加法;最小公倍数&…...
ETL快速拉取物流信息
我国作为世界第一的物流大国,但是在目前的物流信息系统还存在着几大的痛点。主要包括以下几个方面: 数据孤岛:有些物流企业各个部门之间的数据标准不一致,难以实现数据共享和协同,容易导致信息孤岛。 操作繁琐&#x…...
17.1 SpringMVC框架_SpringMVC入门与数据绑定(❤❤)
17.1 SpringMVC框架_SpringMVC入门与数据绑定 1. SpringMVC入门1.1 MVC介绍1.2 环境配置1. 依赖引入2. web配置文件:DispatchServlet配置3. applicationContext.xml配置4. 开发Controller控制器(❤❤)1.3 MVC处理流程图2. Spring MVC数据绑定2.1 URL Mapping2.2 URL Mapping三个…...
Leetcode 11.盛水最多的容器
题目 给定一个长度为 n 的整数数组 height 。有 n 条垂线,第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线,使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 说明:你不能倾斜容器。…...
TDengine 快速体验(Docker 镜像方式)
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能,本节首先介绍如何通过 Docker 快速体验 TDengine,然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker,请使用 安装包的方式快…...
Python爬虫实战:研究feedparser库相关技术
1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...
Mac软件卸载指南,简单易懂!
刚和Adobe分手,它却总在Library里给你写"回忆录"?卸载的Final Cut Pro像电子幽灵般阴魂不散?总是会有残留文件,别慌!这份Mac软件卸载指南,将用最硬核的方式教你"数字分手术"࿰…...
EtherNet/IP转DeviceNet协议网关详解
一,设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络,本网关连接到EtherNet/IP总线中做为从站使用,连接到DeviceNet总线中做为从站使用。 在自动…...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例,模拟20个网页的爬取,每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程:允许程序同时执行多个任务,提高IO密集型任务(如网络请求)的效率…...
自然语言处理——Transformer
自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效,它能挖掘数据中的时序信息以及语义信息,但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN,但是…...
C++八股 —— 单例模式
文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全(Thread Safety) 线程安全是指在多线程环境下,某个函数、类或代码片段能够被多个线程同时调用时,仍能保证数据的一致性和逻辑的正确性…...
重启Eureka集群中的节点,对已经注册的服务有什么影响
先看答案,如果正确地操作,重启Eureka集群中的节点,对已经注册的服务影响非常小,甚至可以做到无感知。 但如果操作不当,可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...
return this;返回的是谁
一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请,不同级别的经理有不同的审批权限: // 抽象处理者:审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...
Python爬虫(52)Scrapy-Redis分布式爬虫架构实战:IP代理池深度集成与跨地域数据采集
目录 一、引言:当爬虫遭遇"地域封锁"二、背景解析:分布式爬虫的两大技术挑战1. 传统Scrapy架构的局限性2. 地域限制的三种典型表现 三、架构设计:Scrapy-Redis 代理池的协同机制1. 分布式架构拓扑图2. 核心组件协同流程 四、技术实…...
