css3选择器优先级(在两个或多个CSS规则应用于同元素上时,不同级别的优先顺序从高到底是什么)

2025-04-19 12:30:02 0

css3选择器优先级(在两个或多个CSS规则应用于同元素上时,不同级别的优先顺序从高到底是什么)

本文目录

在两个或多个CSS规则应用于同元素上时,不同级别的优先顺序从高到底是什么

摘要css优先级规则:

1.先从高等级进行比较,高等级相同时,再比较低等级的,以此类推;

2.完全相同的话,就采用 后者优先原则(也就是样式覆盖);

3.css属性后面加 !important 时,无条件绝对优先(比内联样式还要优先);

权值等级划分, 一般来说是划分4个等级:

第一等级:代表 内联样式,如 style=““,权值为 1,0,0,0;

第二等级:代表 ID选择器,如 #id=““, 权值为 0,1,0,0;

第三等级:代表 calss | 伪类 | 属性 选择器,如 .class | :hover,:link,:target | , 权值 0,0,1,0;

第四等级:代表 标签 | 伪元素 选择器,如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1;

此外,通用选择器(*),子选择器(》), 相邻同胞选择器(+)等选择器不在4等级之内,所以它们的权值都为 0,0,0,0;

权值计算 公式:

权值 = 第一等级选择器*个数,第二等级选择器*个数,第三等级选择器*个数,第四等级选择器*个数;

低等级的选择器,个数再多也不会越等级超过高等级的选择器的优先级的

咨询记录 · 回答于2021-11-18

在两个或多个CSS规则应用于同元素上时,不同级别的优先顺序从高到底是什么

css优先级规则:

1.先从高等级进行比较,高等级相同时,再比较低等级的,以此类推;

2.完全相同的话,就采用 后者优先原则(也就是样式覆盖);

3.css属性后面加 !important 时,无条件绝对优先(比内联样式还要优先);

权值等级划分, 一般来说是划分4个等级:

第一等级:代表 内联样式,如 style=““,权值为 1,0,0,0;

第二等级:代表 ID选择器,如 #id=““, 权值为 0,1,0,0;

第三等级:代表 calss | 伪类 | 属性 选择器,如 .class | :hover,:link,:target | , 权值 0,0,1,0;

第四等级:代表 标签 | 伪元素 选择器,如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1;

此外,通用选择器(*),子选择器(》), 相邻同胞选择器(+)等选择器不在4等级之内,所以它们的权值都为 0,0,0,0;

权值计算 公式:

权值 = 第一等级选择器*个数,第二等级选择器*个数,第三等级选择器*个数,第四等级选择器*个数;

低等级的选择器,个数再多也不会越等级超过高等级的选择器的优先级的

如何理解CSS样式的优先级?

如何理解CSS样式的优先级?

所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序;浏览器是通过优先级来判断哪些属性值与元素最相关以决定并应用到该元素上的。优先级就是分配给指定的CSS声明的一个权重,它由匹配的选择器中的每一种选择器类型的数值决定

css 选择器优先级的问题

优先级是样式在后面的优先于前面的,一行代码中有两个width属性,那么后面的属性先生效,ID选择器优先于class选择器,class选择器优先于标签选择器

css3选择器优先级(在两个或多个CSS规则应用于同元素上时,不同级别的优先顺序从高到底是什么)

本文编辑:admin

更多文章:


贪吃蛇代码java(java贪吃蛇代码注释求解)

贪吃蛇代码java(java贪吃蛇代码注释求解)

本文目录java贪吃蛇代码注释求解java 贪吃蛇代码移动方面的问题贪吃蛇 java代码求一份java 贪吃蛇的代码求Java贪吃蛇代码求java贪吃蛇的编程,并有注释求一段JAVA编写的贪吃蛇小程序源代码用JAVA设计游戏:贪吃蛇游戏ja

2025年3月6日 15:30

have的用法(英语中,Have的几种形式的用法)

have的用法(英语中,Have的几种形式的用法)

本文目录英语中,Have的几种形式的用法英语Have的用法Have怎用的啊为什么有时要加有动词have的用法have 的几种用法英语中,Have的几种形式的用法通常与介词to 形成短语,have to=must是不得不;必须的意思,相当于一

2025年2月9日 09:50

全栈工程师需要掌握哪些(全栈都学哪些东西)

全栈工程师需要掌握哪些(全栈都学哪些东西)

本文目录全栈都学哪些东西全栈工程师是学什么python全栈工程师需要学什么全栈都学哪些东西全栈需要学习的内容有:后端开发、前端开发、界面设计、产品设计、数据库、各种移动客户端、三屏兼容、restFul API设计和OAuth等等,比较前卫的

2025年4月1日 20:30

c  多线程(C语言怎样实现多线程)

c 多线程(C语言怎样实现多线程)

本文目录C语言怎样实现多线程c语言多线程问题C语言多线程的优势c的多线程实现c语言中怎样创建多线程C语言如何实现多线程同时运行c语言实现多线程C语言能实现多线程么c语言如何编写一个简单的多线程程序C语言怎样实现多线程首先你要有控制蛇移动方向

2025年3月23日 07:50

round和roundup函数的区别(Excel中 INT函数 和 ROUND函数有什么区别)

round和roundup函数的区别(Excel中 INT函数 和 ROUND函数有什么区别)

本文目录Excel中 INT函数 和 ROUND函数有什么区别EXCEL 单元格将 单元格格式设置成数字(保留两位小数)与用ROUND的函数保留两位小数,结果有什么区别excel中round函数与rounddown函数区别“ROUND函数”

2025年2月20日 01:30

qq怎么设置留言板?12345留言板怎么用

qq怎么设置留言板?12345留言板怎么用

本文目录qq怎么设置留言板12345留言板怎么用什么是留言板怎么让别人看不到自己留言板的信息留言板的介绍留言板留言大全 青春简短内容手机qq留言板在哪里留言板的优点有哪些领导留言板有用吗求简单的asp留言板代码qq怎么设置留言板以手机QQ为

2025年3月13日 04:20

开源网站是什么意思(关于开源建站的问题,都是什么含义呢)

开源网站是什么意思(关于开源建站的问题,都是什么含义呢)

本文目录关于开源建站的问题,都是什么含义呢java开源是什么意思开源和不开源有什么不同都是什么意思开源是什么意思开源是什么意思求简单通俗的解释,在百度上的那些专业解释看不懂啊关于开源建站的问题,都是什么含义呢织梦比较出名易学、discuz是

2025年4月12日 19:40

java方法重载(简述重载与覆盖的区别java)

java方法重载(简述重载与覆盖的区别java)

本文目录简述重载与覆盖的区别java为什么Java不支持运算符重载Java中什么叫方法的重载简述重载与覆盖的区别java重载: 在一个类当中才可以重载,方法名相同,参数个数不同或参数个数相同而参数类型不同。 覆盖: 又称重写,在派生类(子类

2025年3月21日 02:20

win10企业版和专业版区别(win10版本区别有哪些win10各个版本的区别介绍)

win10企业版和专业版区别(win10版本区别有哪些win10各个版本的区别介绍)

本文目录win10版本区别有哪些win10各个版本的区别介绍Win10专业版/普通版和企业版有什么区别win10企业版和专业版的有什么区别win10版本区别有哪些win10各个版本的区别介绍一、Win10家庭版对于大多数购买新PC机的用户来

2025年4月2日 06:30

dealer怎么读(broker怎么解释dealer的意思是什么)

dealer怎么读(broker怎么解释dealer的意思是什么)

本文目录broker怎么解释dealer的意思是什么broker和dealer的区别broker怎么解释dealer的意思是什么broker是经纪人、dealer是经销商。dealer读音英  释义n. 经销商;商人n. 发牌员n. 毒品贩

2025年2月9日 07:00

nutritional什么意思(nutrient和nutrition的区别是什么)

nutritional什么意思(nutrient和nutrition的区别是什么)

本文目录nutrient和nutrition的区别是什么nutritions 什么意思nutrition与nutrient的区别nutrition是什么意思nutritional和nutritious的区别是什么nutrient和nutri

2025年3月27日 08:20

friend是什么意思中文(friend是什么意思)

friend是什么意思中文(friend是什么意思)

本文目录friend是什么意思friend的中文意思FRIEND中文什么friends什么意思中文翻译成Friend,中文是什么意思friends什么意思friend的中文意思和little的中文意思和picture的中文意思friend是

2025年3月26日 09:50

全栈工程师和架构师的区别(什么是Python全栈工程师和python工程师有什么区别)

全栈工程师和架构师的区别(什么是Python全栈工程师和python工程师有什么区别)

本文目录什么是Python全栈工程师和python工程师有什么区别请问架构师和全栈工程师的区别 架构师是不是比全栈牛怎么区分全栈工程师和架构师全栈软件工程师和系统架构师的异同程序员,架构师,软件工程师的区别全栈工程师和架构师的区别什么是Py

2025年3月2日 01:00

tftpd32刷路由器方法(路由器如何刷固件)

tftpd32刷路由器方法(路由器如何刷固件)

本文目录路由器如何刷固件路由器升级的Tftpd32文件是什么路由器升级怎么升的怎么用TFTPD32从PC端把文件传到路由器中怎么升级路由器路由器如何刷固件一般是到官司网下最新的固件,在路由设置里面有升级的选项,进入路由方法不同,要看具体型号

2025年2月16日 00:30

什么软件可以用做随机抽奖工具?用excel表 怎么设置一个随机抽奖

什么软件可以用做随机抽奖工具?用excel表 怎么设置一个随机抽奖

本文目录什么软件可以用做随机抽奖工具用excel表 怎么设置一个随机抽奖如何用PPT制作一个随机抽奖的幻灯片或提供一个抽奖器数字滚动抽奖软件什么软件可以用做随机抽奖工具其实抽奖的玩法有挺多样的。可以是运气性发奖,也可以是竞技性发奖。经过细致

2025年2月19日 02:10

什么是Slot?slot和groove有什么区别

什么是Slot?slot和groove有什么区别

本文目录什么是Slotslot和groove有什么区别手机卡槽显示slot是什么意思slot 是什么意思slot是什么意思什么是Socket和Slot什么是Slot您好,楼主,您问的问题是关于哪方面的呢?如果是计算机方面的话,那应该是以前老

2025年2月10日 17:40

webstorage(华硕的webstorage有什么用)

webstorage(华硕的webstorage有什么用)

本文目录华硕的webstorage有什么用html5 web storage和cookie的区别华硕ASUS WebStorage软件是什么web storage有什么用WebStorage注册及使用介绍电脑中的webstorage ID是

2025年2月9日 13:00

网站源代码怎么找下载信息(浏览器查看网页源代码怎样通过代码找到地址,然后下载)

网站源代码怎么找下载信息(浏览器查看网页源代码怎样通过代码找到地址,然后下载)

本文目录浏览器查看网页源代码怎样通过代码找到地址,然后下载怎么获取网页源代码中的文件怎样从网页源码中找到下载地址浏览器查看网页源代码怎样通过代码找到地址,然后下载查找呗可以查找rar txt iso等等文件格式,然后匹配下载,或者观察网页形

2025年3月3日 09:50

ms17 010 下载(如何知道自己有无安装MS17-010补丁或者说win10.0.14393.206这个版本应下载MS17-010哪个版本的补丁啊)

ms17 010 下载(如何知道自己有无安装MS17-010补丁或者说win10.0.14393.206这个版本应下载MS17-010哪个版本的补丁啊)

本文目录如何知道自己有无安装MS17-010补丁或者说win10.0.14393.206这个版本应下载MS17-010哪个版本的补丁啊windows 勒索病毒 怎么下补丁如何安装补丁MS17-010如何知道自己有无安装MS17-010补丁或

2025年4月18日 18:30

新手学做办公表格(新手怎么制作表格Excel)

新手学做办公表格(新手怎么制作表格Excel)

本文目录新手怎么制作表格Excel新人求EXCEL技巧大全电脑表格的制作方法初学者新手如何开始学习Excel新手怎么用电脑做表格新手怎么制作表格Excel新手怎么制作表格excel?在我们的日常生活中,不管是找工作还是正在工作,都会需要会一

2025年3月31日 04:50

近期文章

本站热文

harbor,port,pier的区别?谁能解释“harbour“(港口)与“pier“(码头)的区别
2025-02-22 17:40:03 浏览:20
ibatis foreach(ibatis 批量update操作)
2025-02-10 23:40:06 浏览:7
endless rain(endless rain表达什么情感)
2025-02-14 06:00:02 浏览:7
标签列表

热门搜索