CSS 样式优先级&权重

最新推荐文章于 2024-06-16 17:29:19 发布
最新推荐文章于 2024-06-16 17:29:19 发布
阅读量571 收藏 2
点赞数
分类专栏： 前端刷题笔记 文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a_lexzanda/article/details/127634580
版权

CSS的样式优先级可分为四大类：

1、！important

无论何种引入方式和选择器，优先级都是最高的；

2、行内样式 style=""

行内样式的优先级要高于嵌入和外链，嵌入和外链如果使用的选择器相同就看他们在页面中插入的顺序，在后面插入的会覆盖前面的。

3、选择器优先级

id选择器  >

（类选择器 | 伪类选择器 | 属性选择器 ）>

（元素选择器 | 伪元素选择器::｜后代选择器空格 ）>

（子选择器> | 相邻选择器+） >

通配符选择器*

4、继承样式

5、浏览器默认样式

 

 

A_lexzanda
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【CSS笔记】CSS选择器的优先级（权重）
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
08-20 2997
在CSS里面，如果有多个选择器作用在同一个元素上面，那么会按照上面的优先级顺序进行样式的选取，也就是优先级越高，浏览器最终就显示哪种样式。通过上面五个选择器的权重值，就可以计算出任意组合的权重值了，权重值就是将所有的权重相加。对于哪些组合选择器，我们可以通过计算选择器的权重来查看优先级，权重越大，优先级越高。
CSS的优先级和权重简介
pink_pantise的博客
12-12 563
权重是什么？ 首先权重一个相对概念，可以认作天平中的砝码，权重大的地方就会被重视（使用），当然这在权重等级相同的前提下。 一：权重的等级划分： 第一等级：内部样式 (style=" ")，权值：1000. 第二等级：ID选择器（#id），权值：100. 第三等级：class、伪类、属性选择器（.class , :hover , :link , [type])，权值为：10. *伪类有：:link，:visited，:hover，:active，:focus，:frist-child。 * 第四等级：标签、
css样式的优先级
yycnf的博客
11-15 915
css样式的优先级 按照 CSS 的来源，可以将网页定义的样式分为 4 种： HTML 默认样式； 作者（网站开发者/程序员）定义的样式； 用户（网站使用者）设置的样式； 浏览器默认样式。 注意： 当用户设置的样式中使用了!important命令声明之后，用户的!important命令会优先于作者声明的!important命令。 根据 CSS 优先级规则：作者定义的样式能够覆盖浏览器默认设置的样式，而用户在浏览器中设置的样式可以覆盖作者的样式。 CSS 根据样式的远近关系来决定最终的优先级.
CSS的4种引入方式及优先级
weixin_30326741的博客
11-09 263
第一：CSS的4种引入方式 CSS的4种引入方式是：行内样式、内嵌样式、链接样式、导入样式 1.行内样式 最直接最简单的一种，直接对HTML标签使用style=""，例如： <p style="color:#F00; "></p> 缺点：HTML页面不纯净，文件体积大，不利于蜘蛛爬行，后期维护不方便。 2.内嵌样式 内嵌样式就是将CSS代码写在&l...
CSS【详解】样式优先级（含提升优先级的方法、样式的层叠、数值计算法等）
最新发布
朝阳39的博客
06-16 2366
数值越大，优先级越高，尽量保持较低的优先级，以便使用更高优先级的选择器重置样式0级——通配选择器、选择符和逻辑组合伪类。逻辑组合伪类有:not()、:is()和:where等，这些伪类本身并不影响CSS优先级，影响优先级的是括号里面的选择器。1级——标签选择器2级——类选择器、属性选择器和伪类3级——ID选择器4级——style内联5级——!important!important是顶级优先级，可以重置JavaScript设置的样式，唯一推荐使用的场景就是使JavaScript设置无效。
CSS样式的优先级别
cui_angel的专栏
07-27 1071
优先原则一：文本从上到下，后出现的样式优先于前面出现的同一样式 例： .def1{background:black;} .def2{background:yellow; } 测试1结果：所有浏览器均yellow色，注意：与class=”” 引号内的顺序无关，只看.def1和.def2在声明时的顺序，.def2后声明的所以权重高。 优先原则二：id声明（即 # 开头的样
CSS样式优先权
PXYStyle的博客
11-28 594
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 1拥有最高的优先权。 1.内联样式（在 HTML 元素内部） 2.内部样式表（位于 标签内部） 3.外部样式表 4.浏览器缺省设置 因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明： 标签中的样式声明，外部样
CSS样式优先级
码厩
08-30 2909
CSS样式列举 在说CSS样式的优先级之前，我们先来了解一下CSS有种表示样式的形式。 层叠样式类型有： 内联样式&amp;lt;a style=&quot;&quot;&amp;gt;； 内部样式&amp;lt;style&amp;gt;&amp;lt;/style&amp;gt;； 外部样式&amp;lt;link&amp;gt;； 浏览器用户自定义样式； 浏览器默认样式； 层叠样式内部的选择器有： id
权重和层叠规则决定了CSS样式优先级
12-13
首先，给大家看一篇关于CSS优先级的示例 复制代码代码如下: <span xss=removed><html> <head> <style type=”text/css”> #redP p { /* 权值 = 100+1=101 */ color:#F00; /* 红色 */ } #redP .red...
css样式优先级比较实例
01-31
本实例将深入探讨CSS样式的优先级比较，帮助你更好地理解和控制页面的视觉呈现。 首先，我们需要了解CSS选择器的权重计算规则。CSS选择器的权重分为四类：内联样式、ID选择器、类选择器/属性选择器/伪类、以及元素...
css的样式和选择符的优先权
apr16037的博客
08-14 129
样式优先权： 1.内联式【行内样式】——>内嵌式【内部式】——>外链式【外部式】——>@import url导入式 //内联式（行内样式）： <p style="color:green;font-size:40px;">第一段</p> //内嵌式（内部式）： <style type="text/css...
css样式权重优先级，css样式优先级
weixin_33963594的博客
04-01 163
原文：http://www.bkjia.com/Javascri... 样式选择器权重优先级： important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符 important的权重为1,0,0,0 ID的权重为0,1,0,0 类的权重...
css样式优先级
kivet的博客
07-02 641
有时在设置 HTML 元素时，会遇到相互冲突的多个样式。这时，到底是选择哪个的样式呢？看完下面的文章，你就懂了 1.在body上设置样式， <style type="text/css"> body { color: red; } </style> <h1>Hello World!</h1> 运行结果： 如图，会采...
Style 的优先级
weixin_30249203的博客
07-24 279
Dependency Property（简称DP）是WPF的核心，Style就是基于Dependency Property的，关于DP的内幕，请参见深入WPF--依赖属性。Style中的Setter就是作用在DP上的，如果你在控件中定义了一个CLR属性，Style是不能设置的。Dependency Property设计的精髓在于把字段的存取和对象（Dependency Object）剥离...
CSS样式的优先级浅谈
xiaoweids的博客
03-29 150
结果：所有浏览器均yellow色，注意：与class=””引号内的顺序无关，只看.def1和.def2在声明时的顺序，.def2后声明的所以权重高。结果：所有浏览器均pink色，注意：虽然按优先原则一，后出现的权重高，但那只是在同样重量级下的比较，优先原则二各重量级别就不同了。以上三种声明处于不同的量级，份量上，div 开头相当于 1克 重，. 开头相当于 1公斤 重，#开头相当于 1吨 重。：id声明（即 # 开头的样式）>class声明（即 . 开头的样式）> 标签声明(即 类似 div 开头)
css样式优先级问题
未曾远去
03-26 2064
官方表述的CSS样式优先级如下：通用选择器（*） &lt; 元素(类型)选择器 &lt; 类选择器 &lt; 属性选择器 &lt; 伪类 &lt; ID 选择器 &lt; 内联样式 CSS 伪类用于向某些选择器添加特殊的效果属性选择器可以根据元素的属性及属性值来选择元素。 那么，我们来举个例子：html代码：&lt;div class="img-div"&gt; &lt;img src="...
样式优先级CSS优先级CSS样式权重
你的微笑像拥抱
02-17 676
样式优先级
《前端》样式冲突，怎么解决--2020年3月30日
BelleDiao的博客
03-30 1440
有时候我引用了bootstrap样式，自己也定义了 样式。但是我看后台应用的是bootstrap包装好的样式。 （很多时候，其实是我愚蠢的总把id选择器，用了“.”，其实应该用“#”） 还有的时候，element.style的样式也阻挡了我自定义的样式。 首先，了解优先级问题。 通常可以将css的优先级由高到低分为六组： 1、第一优先级：无条件优先的属性只需要在属性后面使用！impor...
理解CSS优先级计算：规则与权重解析
"这篇文章主要探讨了CSS优先级计算的规则，包括CSS的引入方式和选择器的权重。" 在CSS中，优先级的计算对于决定哪个样式生效至关重要。以下是关于CSS优先级计算的一些详细规则： **一、CSS的引入方式** 1. **内联...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值