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

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, 等)

  • 标签选择器、伪元素选择器 (pdiv:before, 等)

  • !important声明可以应用于以上任意选择器,并强制提升其优先级

当多个规则同时应用于一个元素时,优先级高的规则生效。

如果两个选择器具有相同特指度(例如两个类选择器),则根据CSS文件或样式表加载顺序来确定(后来加载的样式通常会覆盖先前加载的同优先级样式)。

相关文章:

css中选择器的优先级

CSS 的优先级是由选择器的特指度&#xff08;Specificity&#xff09;和重要性&#xff08;Importance&#xff09;决定的&#xff0c;以下是优先级规则&#xff1a; 特指度&#xff1a; ID 选择器 (#id): 每个ID选择器计为100。 类选择器 (.class)、属性选择器 ([attr]) 和伪…...

python3字符串内建方法split()心得

python3字符串内建方法split()心得 概念 用指定分隔符&#xff08;默认是任何空白字符&#xff09;将字符串拆分成列表。 语法 string.split(separator.max) 参数1.split(参数2&#xff0c;参数3) 参数1&#xff1a;string 字符串&#xff0c;需要被拆分的字符串。 参数2&a…...

html的列表标签

列表标签 列表在html里面经常会用到的&#xff0c;主要使用来布局的&#xff0c;使其整齐好看. 无序列表 无序列表[重要]&#xff1a; ul &#xff0c;li 示例代码1&#xff1a; 对应的效果&#xff1a; 无序列表的属性 属性值描述typedisc&#xff0c;square&#xff0c;…...

【Pytorch深度学习开发实践学习】B站刘二大人课程笔记整理lecture04反向传播

lecture04反向传播 课程网址 Pytorch深度学习实践 部分课件内容&#xff1a; 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、自定义函数实现学习率调整&#xff1a;不同层不同的学习率 前言 在训练神经网络时&#xff0c;如果学习率过大&#xff0c;优化算法可能会在最优解附近震荡而无法收敛&#x…...

10MARL深度强化学习 Value Decomposition in Common-Reward Games

文章目录 前言1、价值分解的研究现状2、Individual-Global-Max Property3、Linear and Monotonic Value Decomposition3.1线性值分解3.2 单调值分解 前言 中心化价值函数能够缓解一些多智能体强化学习当中的问题&#xff0c;如非平稳性、局部可观测、信用分配与均衡选择等问题…...

2 Nacos适配达梦数据库实现方案

1、修改源代码方式 Nacos 原生是不支持达梦数据库的,所以就要想办法让它 “支持”,因为是开源软件,我们可以从源码入手,在流行的 1.x 、2.x 或最新版本代码的基本上进行修改。 主要涉及到以下内容的修改: com/alibaba/nacos/persistence/datasource/ExternalDataS...

【Gitea】配置 Push To Create

引 在 Git 代码管理工具使用过程中&#xff0c;经常需要将一个文件夹作为仓库上传到一个未创建的代码仓库。如果 Git 服务端使用的是 Gitea&#xff0c;通常会推送失败。 PS D:\tmp\git-test> git remote add origin http://192.1.1.1:3000/root/git-test.git PS D:\tmp\g…...

关于postgresql数据库单独设置某个用户日志级别(日志审计)

前言&#xff1a; 很多时候我们想让数据库日志打印详细一点&#xff0c;但是又担心会对数据库本身产生一些不可控的影响&#xff0c;还会担心数据库产生的庞大的日志导致主机资源不太够用的影响。那么今天我们就通过讲解给单个用户设置 log_statement来解决以上这些问题。 注…...

阿里云ECS香港服务器性能强大、cn2高速网络租用价格表

阿里云香港服务器中国香港数据中心网络线路类型BGP多线精品&#xff0c;中国电信CN2高速网络高质量、大规格BGP带宽&#xff0c;运营商精品公网直连中国内地&#xff0c;时延更低&#xff0c;优化海外回中国内地流量的公网线路&#xff0c;可以提高国际业务访问质量。阿里云服务…...

实战打靶集锦-025-HackInOS

文章目录 1. 主机发现2. 端口扫描3. 服务枚举4. 服务探查5. 提权5.1 枚举系统信息5.2 探索一下passwd5.3 枚举可执行文件5.4 查看capabilities位5.5 目录探索5.6 枚举定时任务5.7 Linpeas提权 靶机地址&#xff1a;https://download.vulnhub.com/hackinos/HackInOS.ova 1. 主机…...

list.stream().forEach()和list.forEach()的区别

list.stream().forEach() 和 list.forEach() 在 Java 中都是用于遍历集合元素的方法&#xff0c;但它们在使用场景和功能上有所不同&#xff1a; list.forEach()&#xff1a; 是从 Java 8 开始引入到 java.util.List 接口的标准方法。直接对列表进行迭代&#xff0c;它采用内部…...

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 硬盘最好分出一个单独的盘&#xff0c;而且最少预留200G&#xff0c;可以使用移动固态操作系统win7/10/11 VMware 安装 版本&#xff1a;VMware Works…...

大模型中的token是什么?

定义 大模型的"token"是指在自然语言处理&#xff08;NLP&#xff09;任务中&#xff0c;模型所使用的输入数据的最小单元。这些token可以是单词、子词或字符等&#xff0c;具体取决于模型的设计和训练方式。 大模型的token可以是单词级别的&#xff0c;也可以是子…...

跳表是一种什么样的数据结构

跳表是有序集合的底层数据结构&#xff0c;它其实是链表的一种进化体。正常链表是一个接着一个用指针连起来的&#xff0c;但这样查找效率低只有O(n)&#xff0c;为了解决这个问题&#xff0c;提出了跳表&#xff0c;实际上就是增加了高级索引。朴素的跳表指针是单向的并且元素…...

【刷题记录】最大公因数,最小公倍数(辗转相除法、欧几里得算法)

本系列博客为个人刷题思路分享&#xff0c;有需要借鉴即可。 1.题目链接&#xff1a; 无 2.详解思路&#xff1a; 题目描述&#xff1a;输入两个正整数&#xff0c;输出其最大公因数和最小公倍数 一般方法&#xff1a;最大公因数&#xff1a;穷加法&#xff1b;最小公倍数&…...

ETL快速拉取物流信息

我国作为世界第一的物流大国&#xff0c;但是在目前的物流信息系统还存在着几大的痛点。主要包括以下几个方面&#xff1a; 数据孤岛&#xff1a;有些物流企业各个部门之间的数据标准不一致&#xff0c;难以实现数据共享和协同&#xff0c;容易导致信息孤岛。 操作繁琐&#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 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 说明&#xff1a;你不能倾斜容器。…...

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...