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

CSS 选择器优先级,!important 也会被覆盖?

目录

  • 1,重要性
  • 2,专用性
  • 3,源代码顺序

CSS 属性值的计算过程中。其中第2步层叠冲突只是简单说明了下,这篇文章来详细介绍。

层叠冲突更广泛的被称为 CSS选择器优先级计算

为什么叫层叠冲突,可以理解为 CSS 是 Cascading Style Sheets 的缩写,这里面有层叠(cascade)的概念。

选择器会进行组合,所以才有了优先级规则。主要有3个规则,前一种会直接否决后一种。

1,重要性

只有一条规则: !important,总是优先于其他规则。

但我在张鑫旭老师的著作《CSS世界》中发现,就最终结果而言,!important 也有可能会被覆盖!那就是 max-widthmax-height

示例

<style>.box {width: 200px !important;max-width: 100px;height: 100px;background-color: salmon;}
</style><div class="box"></div>

表现:

在这里插入图片描述

!important 需要谨慎使用,会对维护造成困难。

2,专用性

用来衡量选择器的具体程度,主要是指它能匹配多少元素,匹配的越少专用性越高

基础专用性(优先级):行内样式 > id选择器 > class选择器 > 元素选择器。

而选择器组合后需要更精细的来衡量,也就是权重

  • 千位:如果声明在 style 属性中,该列加 1 分(相当于没有选择器,所以它们的专用性总是 1000)否则为 0
  • 百位:在整个选择器中每包含一个 ID 选择器,该列就加 1 分。
  • 十位:在整个选择器中每包含一个类选择器、属性选择器、或者伪类,该列就加 1 分。
  • 个位:在整个选择器中每包含一个元素选择器或伪元素,该列就加 1 分。
选择器千位百位十位个位合计值备注
h100010001
#id01000100
h1 + p::first-letter00030003
li > a[href*=” zh-CN”] > .box00220022元素选择器是 li 和 a
内联样式10001000

注意点

  1. 进制是 256 进制,不是10进制(这个无法求证,参考其他文章的)。
  2. 通配符选择器(*), 复合选择器(+、>、~、空格)和否定伪类(:not)在专用性中无影响

3,源代码顺序

如果选择器有相同的重要性和专用性,则看源代码顺序。


以上。

相关文章:

CSS 选择器优先级,!important 也会被覆盖?

目录 1&#xff0c;重要性2&#xff0c;专用性3&#xff0c;源代码顺序 CSS 属性值的计算过程中。其中第2步层叠冲突只是简单说明了下&#xff0c;这篇文章来详细介绍。 层叠冲突更广泛的被称为 CSS选择器优先级计算。 为什么叫层叠冲突&#xff0c;可以理解为 CSS 是 Cascadi…...

关于src别名的配置之tsconfig.json配置

tsconfig.json {"compilerOptions": {"baseUrl": "./", // 解析非相对模块的基地址&#xff0c;默认是当前目录"paths": { //路径映射&#xff0c;相对于baseUrl"/*": ["src/*"] }} } ① "baseUrl": &…...

Mybatis如何执行批量操作

文章目录 Mybatis如何执行批量操作使用foreach标签 使用ExecutorType.BATCH如何获取生成的主键 Mybatis如何执行批量操作 使用foreach标签 foreach的主要用在构建in条件中&#xff0c;它可以在SQL语句中进行迭代一个集合。foreach标签的属性主要有item&#xff0c;index&…...

LeetCode 1094. 拼车:优先队列

【LetMeFly】1094.拼车&#xff1a;优先队列 力扣题目链接&#xff1a;https://leetcode.cn/problems/car-pooling/ 车上最初有 capacity 个空座位。车 只能 向一个方向行驶&#xff08;也就是说&#xff0c;不允许掉头或改变方向&#xff09; 给定整数 capacity 和一个数组…...

项目开发维护技术文档(总结梳理)

目录 一、项目背景 二、架构设计 1.技术栈 2.架构图 3.代码结构 三、模块划分 1.用户模块 2.商品模块 四、开发规范 1.命名规范 2.代码格式 3.版本控制 五、部署流程 1.环境要求 2.部署流程 六、问题解决 1.数据库连接异常 2.Redis缓存失效 七、参考资料 项…...

01_学习使用javax_ws_rs_上传文件

文章目录 1 前言2 Maven 依赖3 上传接口4 如何解析 MultipartFormDataInput5 结语 1 前言 使用 Spring MVC 来处理文件上传&#xff0c;想必是大家耳熟能详的了&#xff0c;如下代码&#xff1a; ResponseBody PostMapping("/upload") public String upload(Request…...

MFC 发布CLXHHandleEngine动态库1.0.0.0版本

第一版发布以下功能&#xff0c;此项目使用VS2013创建&#xff0c;项目配置包括Unicode的Mdd,md与多字节版本&#xff1a; //MFC Grid表格 #include "../MFCGridCtrl/GridCtrl.h" //使用AES与Base64加密解密可以与java中的AES加解密衔接 //AES加密解密 #include &q…...

MicroPython 基于microdot框架搭建网页服务器

MicroPython 基于microdot框架搭建网页服务器 简介简单demo 简介 Microdot是一个极简的Python web框架&#xff0c;灵感来自于Flask&#xff0c;它被设计用来运行在资源有限的系统上&#xff0c;如微控制器。它运行在标准的Python和MicroPython上。 API参考microdot 资源下载m…...

FL Studio21.2汉化永久中文语言包

FL Studio21.2这款软件在国内被广泛使用&#xff0c;因此又被称为"水果"。它提供音符编辑器&#xff0c;可以针对作曲者的要求编辑出不同音律的节奏&#xff0c;例如鼓、镲、锣、钢琴、笛、大提琴、筝、扬琴等等任何乐器的节奏律动。此外&#xff0c;它还提供了方便快…...

Glide结合OkHttp保证短信验证接口携带图形验证码接口返回Cookie值去做网络请求

一、实现效果 二、步骤 注意&#xff1a;仅展示核心部分代码 1、导入依赖 api com.github.bumptech.glide:glide:4.10.0 kapt com.github.bumptech.glide:compiler:4.10.0 api com.squareup.okhttp3:okhttp:3.11.0 api com.squareup.okhttp3:logging-interceptor:3.11.02、自…...

怎样用Ajax提交from表单并接收其中的json数据

怎样用Ajax提交表单并接收其中的json数据 需求&#xff1a;实现点击按钮后&#xff0c;数据以表单形式提交至服务器&#xff0c;并接收来自服务器的返回数据。过程中页面不刷新。 AJAX 不是新的编程语言&#xff0c;而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并…...

【动态规划】LeetCode-746LCR 088.使用最小花费爬楼梯

&#x1f388;算法那些事专栏说明&#xff1a;这是一个记录刷题日常的专栏&#xff0c;每个文章标题前都会写明这道题使用的算法。专栏每日计划至少更新1道题目&#xff0c;在这立下Flag&#x1f6a9; &#x1f3e0;个人主页&#xff1a;Jammingpro &#x1f4d5;专栏链接&…...

Unity 接入TapADN播放广告时闪退 LZ4JavaSafeCompressor

通过跟踪安卓日志&#xff0c;发现报如下错误 Didnt find class "com.tapadn.lz4.LZ4JavaSafeCompressor" 解决方案&#xff1a; 去掉Minify这边的勾选&#xff0c;再打包即可。...

【九】linux下部署frp客户端服务端实践(内网穿透)

linux下部署frp客户端服务端实践 简介&#xff1a; 今天有一个这样的需求&#xff0c;部署在公司内部局域网虚拟机上的服务需要在外网能够访问到&#xff0c;这不就是内网穿透的需求吗&#xff0c;之前通过路由器实现过&#xff0c;现在公司这块路由器不具备这个功能了&#x…...

华为1+x网络系统建设与运维(中级)-练习题2

一.设备命令 LSW1 [Huawei]sys LSW1 同理可得&#xff0c;给所有设备改名 二.VLAN LSW1 [LSW1]vlan ba 10 20 [LSW1]int g0/0/1 [LSW1-GigabitEthernet0/0/1]port link-type trunk [LSW1-GigabitEthernet0/0/1]port trunk allow-pass vlan 10 20 [LSW1-GigabitEthernet0/0/1]in…...

自定义类型-结构体,联合体和枚举-C语言

引言 能看到结构体&#xff0c;说明C语言想必学习的时间也不少了&#xff0c;在之前肯定也学习过基本数据类型&#xff0c;包括整型int&#xff0c;浮点型float等等。可是在日常生活中&#xff0c;想要描述一个事物并没有那么简单。比如&#xff0c;你要描述一本书&#xff0c…...

Windows 安装redis,设置开机自启动

Windows 安装redis,设置开机自启动 文章目录 Windows 安装redis,设置开机自启动下载, 解压到指定目录设置redis密码启动redis服务端停止redis服务端设置自启动 下载, 解压到指定目录 官网地址: https://redis.io/ 安装包下载地址: https://github.com/tporadowski/redis/relea…...

Windows安装Mysql Workbench及常用操作

Mysql Workbench是mysql自带的可视化操作界面&#xff0c;功能是强大的&#xff0c;但界面和navicat比&#xff0c;就是觉得别扭&#xff0c;但其实用惯了也还好&#xff0c;各有特色吧。这里记录一下常用的操作。 官方手册&#xff1a;MySQL Workbench 一、安装 1. 下载 官方…...

【计算机网络】15、NAT、NAPT 网络地址转换、打洞

文章目录 一、概念二、分类&#xff08;主要是传统 NAT&#xff09;2.1 基本 NAT2.2 NAPT 三、访问NAT下的内网设备的方式3.1 多拨3.2 端口转发、DMZ3.3 UPnP IGD、NAT-PMP3.4 服务器中转&#xff1a;frp 内网穿透3.4.1 NAT 打洞3.4.2 NAT 类型与打洞成功率3.4.2.1 完全圆锥形 …...

【送书活动三期】解决docker服务假死问题

工作中使用docker-compose部署容器&#xff0c;有时候会出现使用docker-compose stop或docker-compose down命令想停掉容器&#xff0c;但是依然无法停止或者一直卡顿在停止中的阶段&#xff0c;这种问题很让人头疼啊&#xff01; 目录 问题描述问题排查问题解决终极杀招-最粗暴…...

日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

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

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

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

宇树科技,改名了!

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验

Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...

git: early EOF

macOS报错&#xff1a; Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...

基于单片机的宠物屋智能系统设计与实现(论文+源码)

本设计基于单片机的宠物屋智能系统核心是实现对宠物生活环境及状态的智能管理。系统以单片机为中枢&#xff0c;连接红外测温传感器&#xff0c;可实时精准捕捉宠物体温变化&#xff0c;以便及时发现健康异常&#xff1b;水位检测传感器时刻监测饮用水余量&#xff0c;防止宠物…...