CSS中选择器的优先级以及权重如何计算（前端面试题系列）

最新推荐文章于 2024-04-13 03:07:22 发布

快乐朋

最新推荐文章于 2024-04-13 03:07:22 发布

阅读量781

点赞数 3

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/hjp991028/article/details/128321453

版权

！Important>行内样式>ID选择器>类选择器>标签>通配符>>继承>浏览器默认属性

权重

CSS权重选择器优先级计算公式:

优先级注意点:

1. 权重是有四位数字组成,但是不会有进位.

2. 可以理解为类选择器永远大于元素选择器,id选择器永远大于类选择器,依次类推.

3. 等级判断从左向右,如果某一位数值相同,则判断下一位数值.

4. 可以简单记忆法:通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10,id选择器100,行内样式为1000, ！Important无穷大.

5. 继承的权重是0,如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是0

权重叠加: 如果是复合选择器,则会有权重叠加,需要计算权重.

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

快乐朋

关注关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS中选择器的优先级以及权重如何计算（前端面试题系列）

CSS中选择器的优先级以及权重如何计算（前端面试题系列）
复制链接

扫一扫

面试题之css选择器优先级

九日的博客

06-16

987

css优先级规则 CSS 优先规则1：最近的祖先样式比其他祖先样式优先级高。 CSS 优先规则2："直接样式"比"祖先样式"优先级高。 CSS 优先规则3： 优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 CSS 优先规则4：计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大

前端面试题：CSS中的选择器权重

惊蛰小鱼的博客

11-04

2187

CSS中选择器优先级的权重计算先看一段代码，如下： &amp;lt;style&amp;gt; a{ color: red; } #box a{ color: green; } [class=&quot;box&quot;] a{ color: gold; } .box a{ color: brown; } ...

参与评论您还未登录，请先登录后发表或查看评论

字节跳动最爱考的前端面试题：CSS-基础，2024年最新面试官打压

最新发布

m0_60607562的博客

04-13

1007

弹性盒布局，CSS3 的新属性，用于方便布局，比如垂直居中flex属性是flex-grow和flex-basis的简写总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了一个人可以走的很快，但一群人才能走的更远。

CSS选择器权重计算及优先级

04-16

介绍CSS中，单个选择器，以及复合选择器的权重计算规则，比如： .box #mydiv ul li.txt。通过计算选择器的权重，区别其优先级，判断最终样式的覆盖效果。

css选择器优先级权重计算规则

m0_46293001的博客

10-25

651

作用: 当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高权重大小： 1、内联样式，如: style="..."，权值为1000。 2、ID选择器，如：#content，权值为0100。 3、类，伪类、属性选择器，如.content，权值为0010。 4、标签选择器、伪元素选择器，如div p，权值为0001。 5、通配符、复合选择器（+、>、~等）、否定伪类（：not）没有影响，权值为0000。 6、继承的样式没有权值计算规则： 1、首先先计算选择器中有多少

CSS选择器优先级与权重计算

xin00guang的博客

12-22

209

CSS样式选择器优先级 1.选择器优先级 !important > 内联 >id>class>tag> 继承; 2.CSS样式引入方法优先级 内联式 > 内嵌式 > 链接式 > 导入式 //<div style=""></div> > <head>

css选择器，优先级，权重计算

77今天也学习了的博客

05-12

173

参考权重计算规则第零等：!important，大过了其它任何设置。第一等：代表内联样式，如: style=””，权值为1000。第二等：代表ID选择器，如：#content，权值为0100。第三等：代表类，伪类和属性选择器，如.content，权值为0010。第四等：代表标签选择器和伪元素选择器，如div p，权值为0001。第五等：通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。第六等：继承的样式没有权值。计算规则： !important 和内联样式style都属

CSS权重值计算和选择器优先级

lhxsirky的博客

10-21

330

一、权重的值计算以及选择器权重值大小 1、!important放在样式的最后面是最优先的，权重值是10000； 2、内联样式权重值1000，优先级仅次于！important，一般都是在标签内部书写，如：‘<div style="color:red;"></div>’ 3、id选择器权重值是100，如：#first； 4、类选择器、伪类选择器、属性选择器的权重值是10...

html5css3面试题及答案,前端面试题及答案-CSS篇.docx

07-05

HTML5/CSS3 面试题及答案 - CSS 篇本文档提供了 HTML5/CSS3 面试题及答案，涵盖了 CSS 的新特性、选择符、盒模型、浮动、垂直居中等多个方面。 CSS3 的新特性 * 实现圆角（border-radius） * 阴影（box-shadow）...

前端面试题前端面试题.pdf

08-05

6. CSS选择器的优先级是由其特殊性决定的，特殊性由选择器的类型和数量决定。 7. 清除浮动的目的是为了防止浮动元素影响到父容器的高度，常用的方法包括设置一个空的div元素并应用clear属性。 8. CSS预处理器如...

关于CSS优先级算法是如何计算？

Clotho2012的博客

07-18

700

在面试之前对css优先级的理解是：ID优先级>class>元素选择器，外联样式优先级低于内联样式，内联样式优先级低于行间样式，然后就没有然后了……，ID选择器的优先级确实>class选择器的优先级>元素选择器的优先级，但是外联样式优先级并不一定低于内联样式优先级。做为一个合格的前端工程师，让我们彻底搞清楚css优先级计算规则吧！特殊性 ...

【CSS】哪些样式属性可以继承

李留白

03-21

6789

不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-brea

css 选择器 优先级 权重

JackLiu16的博客

09-01

211

参考： https://study.163.com/course/courseLearn.htm?courseId=1004165002#/learn/video?lessonId=1048127069&courseId=1004165002

CSS 选择器权重计算与优先级

WangMin@汪末末

10-02

500

作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章博客地址 ???? WangMin 在讲CSS 选择器权重计算与优先级之前，我们先来了解一下CSS是用来干什么的？CSS是用来通过添加样式使网页更加美观，也就是说CSS是利用选择器来美化网页的，使用户可以在网页上更清晰地找到自己需要的东西。 CSS添加样式的方式：有内部样式（内部样式就是在html文件中通过标签来添加样式）外联样式（通过标签将外部的样式css文件引入到html文件中）还有行间样式，即在元素标签中通过styl

如何计算选择器的权重

weixin_30690833的博客

05-26

143

首先，确定原始权重数值000. 如果选择器包含一个id，那么数值变成100. 如果包含一个类或者一个伪类，那么数值变成010. 如果包含一个元素，那么数值变成001. 综合考虑后，得到的数值越大，那么权重也就越大，浏览器会优先使用权重最大的样式。下面是一些简单的例子： h1.greentea 包含一个h1元素和greentea类，所以它的权重为011. p img 包含两个元素，所以为002. ...

选择器的优先级与css权重的计算方法

m0_37058714的博客

06-13

313

1.选择器的优先级ID选择器>class选择器>标签选择器2.css权重计算方法(有时套用的选择器过于繁琐，并不知道优先级的高低)记下各种选择器的数量值：style：1000；ID：100；class：10；标签：1；eg： div li a ：1+1+1=3 .box li a : 10+1+1=12 #box li a : 100+1+1=102...

CSS选择器权重与优先级

Dax1_的博客

03-20

1819

权重等级 优先级从低到高继承，通配符(*)，权重为0 元素选择器，伪元素选择器，（如h1,::before），权重为1 类选择器，伪类选择器，属性选择器，（如.nav,:hoverr,[attribute]），权重为10 ID选择器，(如#nav)，权重为100 行内样式，(如style="")，权重为1000 !important 重要的，权重为无穷大注意：当权重相同时，采取就近原则，与元素距离近的选择器生效。关于!important 一定要优先考虑使用样式规则的优先级来解决问题而不是 !i

CSS选择器优先级，及权重计算规则

慢才后生

02-16

785

CSS选择器优先级，及权重计算规则

CSS权重叠加计算案例

Yous的博客

03-22

566

第一题 <head> <meta charset="utf-8"> <title>第1题：普通题</title> <style> /* (行内, id, 类, 标签) */ /* !important 最高 */ /* 继承: 最低 */ /* (0, 2, 0, 0) */ #father #son { color:blue; } /* (0, 1, 1, 1) */ #father p.c

"2019前端经典面试题：HTML与XML区别、CSS选择器及权重优先级详解

在这些选择器中，有不同的权重优先级，在内联样式、ID选择器、class选择器、元素选择器、通配选择器和伪类选择器之间有明确的优先级。此外，2019前端经典面试题.docx中还涵盖了更多的前端技术知识，这些问题涉及到...