前端基础-CSS样式的优先级

article/2025/5/17 23:28:00

样式的优先级(了解)

1.强制优先级(important)

语法:样式属性:值 !important;

示意图
在这里插入图片描述

注意:只针对当前这一条css属性

2.选择器优先级

伪对象选择器>!important>行内样式>id选择器>class选择器>标签选择器>通配选择器>继承

示意图
在这里插入图片描述

3.伪对象选择器的优先级(了解)

首字符>首行

示意图
在这里插入图片描述

4.样式分类优先级

行内样式>内部样式/外部样式

示意图1
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1nNyfW1g-1585552032717)(img/1536564263129.png)]
示意图2
在这里插入图片描述

总结:

​ 1.样式分类中:行内样式>内部/外部,内部样式和外部样式没有权重之分,关键是看他们的加载顺序,后面的会覆盖前面的

​ 2.伪类首字>伪类首行>!important>id名>类名/属性>标签名>通配

​ 3.容易被覆盖的选择器,应该写在前面,以便于后面的选择器覆盖它

5.样式叠加(权重)

!important(无穷大) 行内样式(1000) id(100) class(10) 标签(1)

示意图
在这里插入图片描述

总结:掌握一个点:人多力量大 .class<.class标签

继承来的样式不计算权重,也就是说关键看是不是直接修饰的目标标签

权重累计到10,不会往前进一位

选择器权重
继承或者* 的贡献值0,0,0,0
每个元素(标签)贡献值为0,0,0,1
每个类,伪类贡献值为0,0,1,0
每个ID贡献值为0,1,0,0
每个行内样式贡献值1,0,0,0
每个!important贡献值无穷大

总结:

​ 1.比较权重的前提是准确选择到元素,而不是继承来的样式

​ 2.每一级满10也不会往前进1,等级是非常森严的


http://chatgpt.dhexx.cn/article/o7fE9DkL.shtml

相关文章

HTML——CSS样式优先级

代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width, initia…

关于CSS样式优先级

设定Li 当中的a链接样式的时候&#xff0c;设了几次没成功。考虑跟优先级有关。转载这篇文章&#xff0c;供自己记录学习&#xff0c;与新手们讨论交流 一般情况下&#xff1a; [1位重要标志位] > [4位特殊性标志] > 声明先后顺序 !important > [ id > class &g…

JavaWeb_CSS(5)_样式优先级

本系列博客汇总在这里&#xff1a;JavaWeb_CSS 汇总 目录 样式优先级示例 样式优先级 由上到下&#xff0c;由外到内。优先级由低到高。 示例 CSS 文件1p {text-align: center;color: red; }CSS 文件2p {text-align: center;color: green; }/*div 表示 p 标签往内一层*/ d…

CSS 样式优先级权重

CSS的样式优先级可分为四大类&#xff1a; 1、&#xff01;important 无论何种引入方式和选择器&#xff0c;优先级都是最高的&#xff1b; 2、行内样式 style"" 行内样式的优先级要高于嵌入和外链&#xff0c;嵌入和外链如果使用的选择器相同就看他们在页面中插…

html中css样式的优先级规则

CSS2.1 中规定了关于 CSS 规则 Specificity&#xff08;特异性&#xff09;的计算方式&#xff0c;用一个四位的数字串&#xff08;注&#xff1a;CSS2 中是用三位&#xff09;来表示&#xff0c;最后以 Specificity 的高低判断 CSS 的优先权。Specificity 具体的计算规则&…

WEB前端--CSS样式优先级

出处&#xff1a; http://xugang.cnblogs.com 样式的优先级 多重样式&#xff08;Multiple Styles&#xff09;&#xff1a;如果外部样式、内部样式和内联样式同时应用于同一个元素&#xff0c;就是使多重样式的情况。 一般情况下&#xff0c;优先级如下&#xff1a; &#…

CSS的样式与优先级

上节我们学习了三种CSS修饰html的三种方式&#xff1a;内部样式-外部样式-行内样式 那他们有没有优先级之分那&#xff1f;是有的&#xff0c;我们可以了解一下他们同时修改样式是怎么样的优先级 首先在书写的格式上我们的书写顺序排序是&#xff1a;行内-外部-内部 一般都要按…

【三】CSS之样式的优先级

【三】CSS之样式的优先级 1 css样式的优先级 css在使用过程中&#xff0c;因为很多的选择符有具有批量查找的特点&#xff0c;所以很容易出现样式污染的问题。样式污染出现的原因是因为css代码编写过程中&#xff0c;因为引入方式、书写先后顺序以及选择符的优先级等问题导致的…

【CSS】样式优先级

找了好多资料&#xff0c;真是什么样的答案都有&#xff0c;所以自己收集整理了一下。 优先级从高到低如下&#xff1a; &#xff01;important行内样式id选择器类选择器属性选择器伪类选择器标签选择器伪元素选择器 参考&#xff1a;CSS 样式优先级 | 菜鸟教程 (runoob.com)…

HTML样式表优先级最低的是,css的样式优先级

前几天做百度的笔试题&#xff0c;第一题就是关于css优先级的&#xff0c;虽然知道一些规则&#xff0c;但碰上把各条规则相互组合就懵逼了&#xff0c;所以还是得来好好总结一下的。 首要原则 就两条&#xff1a; 优先级高的样式覆盖优先级低的样式 同一优先级的样式&#xff…

#IT界大佬告诉你,程序员接私活的7大平台利器

今天小编在网上汇集了一些国内程序员接私活的平台&#xff0c;希望对大家能够有用。 1、程序员客栈&#xff1a;程序员的经纪人 2、快码众包-让互联网产品开发更快速&#xff01;认准域名Kuai.ma 3、Coding 码市 - 基于云技术的软件外包服务平台 coding码市 4、开源中国众包平…

2020年 9 大程序员接私活的网站

点击“开发者技术前线”&#xff0c;选择“星标????” 在看|星标|留言, 真爱 2019互联网圈不好混&#xff0c;不是每个公司都能像腾讯云每人一部iPhone 11&#xff0c;不少公司今年已经没了年终奖&#xff0c;不要抱怨&#xff0c;因为有的小伙伴估计工作都没了。师长今天…

好起来了!程序员副业接私活网站分享~

来源&#xff1a;网络 1、程序员客栈&#xff1a;程序员的经纪人2、快码众包-让互联网产品开发更快速3、开源中国众包平台 oschina众包4、Coding 码市 - 云技术众包平台5、我爱方案网-电子方案开发&#xff0c;供应链平台6、码易-高质量软件众包交付服务平台7、人人开发 -让管理…

程序员可接私活的10个平台和一些建议,别掉坑里!

点击上方“码农突围”&#xff0c;马上关注&#xff0c;每天上午8:50准时推送 这里是码农充电第一站&#xff0c;回复“666”&#xff0c;获取一份专属大礼包 真爱&#xff0c;请设置“星标”或点个“在看” 作者&#xff1a;程序员新视界 来源&#xff1a;http://suo.im/4tacf…

程序员接私活的6个网站,你有技术就有钱!

点击上方“Python高校”&#xff0c;关注 未未干货立马到手 作者&#xff1a;发哥 链接&#xff1a;GitHubDaily 本篇文章会向大家推荐国内外几个接外包比较靠谱的平台&#xff0c;主旨是贵精不贵多。因此&#xff0c;像「猪x戒」这种会让程序员自贬身价&#xff0c;扰乱市场规…

程序员养家活口接私活必备网站(顺便用技术改变世界)

程序员接私活的原因很多种(挣钱、养家糊口、提升技术等等)。下面整理了一下网站送给最有潜能的你。 提前准备好自己的笔记本和技术呦。 1.码客帮:https://www.make8.com/ 码客帮是一个基于众包的互联网软件技术服务平台,建立项目需求方与技术大牛的连接。帮助需求方快速找到靠…

2020年,给你7个程序员接私活必备网站!

2020互联网圈不好混&#xff0c;不是每个公司都能像蚂蚁金服一样这么大气&#xff0c;不少公司今年因为疫情已经开始裁员&#xff0c;不要抱怨&#xff0c;加油干就完事了&#xff01; 今天给大家推荐几个赚钱养家的好渠道&#xff0c;一起来看看吧&#xff01; 1、程序员客栈…

分享10个接私活的网站

1. 程序员客栈&#xff1a;程序员的经纪人 https://www.proginn.com/ 2. 开源中国众包平台 oschina 众包 https://zb.oschina.net/ 3. 码市&#xff1a;来码市&#xff0c;找人才/任务快人一步 https://codemart.com/ 4. 我爱方案网&#xff1a;电子方案开发&#xff0c;供应…

程序员多赚20k的接私活必备网站

为什么都是程序员&#xff0c;就有人能多赚20k&#xff1f;那是因为副业搞得那么溜啊&#xff01; 今天分享一些程序员搞钱必备的接私活网站&#xff0c;让更多程序员们在工作之余能有另外一份收入。 1.程序员客栈&#xff1a;http://proginn.com 专为程序员服务的软件外包对…

程序员国内外最受好评的接私活6大网站,有技术就不怕赚不到钱!

本篇文章会向大家推荐国内外几个接外包比较靠谱的平台&#xff0c;主旨是贵精不贵多。因此&#xff0c;像「猪x戒」这种会让程序员自贬身价&#xff0c;扰乱市场规则的网站&#xff0c;便不会出现在下方推荐列表中。 下面开始进入正题。 国外篇 如果你打算接国外的软件外包&…