CSS CSS的选择器及其权重到底是怎么计算的？

最新推荐文章于 2024-08-24 00:02:10 发布

Silly夏

最新推荐文章于 2024-08-24 00:02:10 发布

阅读量96

点赞数

分类专栏： CSS 文章标签： css3

本文链接：https://blog.csdn.net/Sillydreamboy/article/details/118555514

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS选择器的种类，包括ID选择器、类选择器、标签选择器、伪类和伪元素等，并揭示了选择器权重的计算方式。权重决定了样式优先级，其中`!important`具有最高优先级，接着是内联样式、ID选择器、类选择器等。理解这些概念对于精确控制页面样式至关重要。

摘要由CSDN通过智能技术生成

选择器

常见的选择器有以下几种

ID选择器、类选择器、标签选择器、伪类、伪元素、类型选择器…

选择器权重

选择器的优先权用权重来计算，权重越高，优先级越高。

样式选择器	权重
!important	正无穷
内联样式	1000
ID选择器	100
类选择器	10
伪类	10
属性选择器	10
元素选择器	1
伪元素	1

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Silly夏

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

【CSS】CSS选择器权重

Jamcy123的博客

04-27

484

伪元素和外层标签取到的不是同一个元素！

CSS选择器及其权重

weixin_50784185的博客

07-08

1980

1. element选择器如：语法：元素名称{属性：属性值;}元素名称如：div、h1、img、a、span、i、em、strong、ul、li、ol....2. class（类）选择器如：语法：.class名{属性：属性值;}3. id选择器如：语法：#+id名4. * 通配符选择器如：语法：*{属性：属性值;} “*”含义是所有元素5. 群组选择器如：有多个选择符应用相同的声明时，可以将选择符用","分隔，合并为一组。6.包含选择器/后代选择器如：语法：选择

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

CSS选择器权重

CongJiYong的博客

04-06

448

ID选择器 #{} +100 类属性伪类 +10 元素伪元素 +1 其它选择器 +0 相同权重后写的生效 div{ color:#f40!important; important加强权重 }

前端CSS：CSS选择器的层叠性和权重计算

08-24

732

通过本文的学习，你已经掌握了CSS选择器的层叠性与权重计算的基础知识，以及它们在实际开发中的应用方法。CSS选择器是前端开发中不可或缺的一部分，它们不仅帮助我们定位和样式化HTML元素，还涉及到层叠性与权重计算的重要概念。层叠性的核心在于权重计算，即根据CSS选择器的不同类型赋予它们不同的优先级。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。权重计算是特殊性的一个具体应用，它用于确定在存在多个相同特殊性的规则时，哪一条规则会被应用。

CSS中选择器的权重值的计算

09-24

总之，CSS选择器的权重值计算是CSS样式优先级的核心，理解并熟练运用这一机制能够帮助开发者更准确地控制页面的样式呈现。在编写CSS时，应尽量避免过多依赖`!important`，保持代码的可读性和可维护性。希望这些信息...

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

04-16

以下是关于CSS选择器权重计算及优先级的详细解释：首先，我们要了解CSS选择器的四个等级及其对应权重： 1. **内联样式**（权重1000）：这是最高级别的权重，当直接在HTML元素中使用`style`属性定义样式时，例如`;...

CSS选择器的权重与优先规则分享

09-24

总之，掌握CSS选择器的权重和优先规则对于编写高效且可维护的样式表至关重要。这不仅可以帮助开发者精确控制页面的样式，也能在解决样式问题时提供清晰的思路。在实践中不断练习和应用这些规则，将成为优化网页设计...

css选择器权重

启

03-17

221

内联样式：1000 id选择器：100 类|伪类|属性选择器：10 元素|伪元素选择器：1 三个原则： 1. !important 优先级最高 2.继承的样式优先级最低 3.同等权重的后声明的优先

css选择器的权重

y1059477028的博客

10-09

1373

通过不同的选择器选中同一个元素，进行一样的样式设定发生样式冲突时，应用哪一个样式由选择器的权重（优先级）决定。4、选择器的累加，不会超过上一级数量级，例如：类选择器再高也不会超过id选择器量变达不到质变；1. 在行内写入!1、比较优先级时，需要将所有选择器的优先级进行相加计算，最后优先级越高，则优先显示；6.通配符、子选择器、相邻选择器等。3、如果优先级计算后相同，此时则优先使用靠下的样式；2、 (并集选择器)分组选择器是单独计算的；一般来说选择器越具体，优先级越高。

CSS选择器的权重

Sunny ic

05-13

2346

每天一个前端面试题之 CSS选择器的权重首先，CSS样式的引入有三种方式，行间样式，内联样式，外联样式。其权重为行间样式>内联样式>外联样式其次，CSS的选择器有以下类型： 1）id选择器（#id）使用ID选择器之前需要先在html文档中的元素添加id名称，这样在样式选择器中才能找到相对应的元素，不同的是id选择器是一个页面中唯一的值，我们在类使用时是在相对应的类名前加上一个“.”号（.className）而id选择器是在名称前使用"#"如(#id)。 2）类选择器（.c

CSS选择器及选择器权重

KennGum的博客

06-03

257

id选择器语法：#id属性值{} #box{} #red{} 类元素选择器 语法：.class属性值{} 通配选择器 作用：选中页面中的所有元素语法：*{} 交集选择器 作用：选中同时符合多个条件的元素语法：选择器1选择器2…选择器n{} - 交集选择器中如果有元素选择器，必须使用元素选择器开头 div.weight{ … } 选择器分组（并集选择器）作用：同时选择多个选择器对应的元素语法：选择器1，选择器2，…，选择器n{} h1, span{ … } #b1, .p1.

CSS选择器和CSS权重

konghouy的博客

07-01

4733

一、CSS作用 CSS 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。它主要用来修饰网页。对网页中元素位置的排版进行像素级精确控制，同时支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。使用HTML和CSS，就可以写出静态的网页了...

CSS选择器权重解析：为何使用li#first?

理解CSS选择器的权重关系至关重要，因为它可以帮助开发者更精确地控制元素的样式，避免不必要的样式覆盖和冲突。在编写CSS时，应尽可能保持选择器的简洁和明确，同时考虑到可能的扩展和维护需求。通过合理使用权重，...