css有哪些选择器，优先级如何计算？

最新推荐文章于 2025-03-26 19:45:04 发布
最新推荐文章于 2025-03-26 19:45:04 发布
阅读量1.5k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 从零开始学前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/learning_web/article/details/94429320
本文介绍了CSS选择器的种类，包括基本选择器、扩展选择器，并详细讲解了后代选择器、交集选择器、并集选择器、伪类选择器等。同时，文章阐述了CSS优先级规则，权值的计算方法，以及如何通过`!important`设定最高优先级。还讨论了相同优先级时的样式选择和浏览器兼容性问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

这里是修真院前端小课堂，每篇分享文从

八个方面深度解析前端知识/技能，本篇分享的是：

【css有哪些选择器，优先级如何计算？】

开场语：

大家好，我是IT修真院上海分院第10期的学员林璇，一枚正直纯洁善良的程序员，今天给大家分享一下，修真院官网WEB（职业）任务三，深度思考中的知识点——css有哪些选择器，优先级如何计算？

（1）背景介绍：

什么是CSS选择器

就是指定CSS要作用的标签，那个标签的名称就是选择器。

意为：选择哪个容器

CSS的选择器分为两大类：基本选择题和扩展选择器。

基本选择器：

标签选择器：针对一类标签

ID选择器：针对某一个特定的标签使用用ID和#来表示

类选择器：针对你想要的所有标签使用用class

通配符*：匹配任何标签

高级选择器：(扩展选择器)

后代选择器：用空格隔开

交集选择器：用.隔开

并集选择器（分组选择器）：用逗号隔开

伪类选择器

儿子选择器，用符号>表示

序选择器

下一个兄弟选择器

结构伪类选择器

优先级权重的概念

权重，是一个相对的概念，是针对某一指标而言。

某一指标的权重是指该指标在整体评价中的相对重要程度。

权重系数，是表示某一指标项在指标项系统中的重要程度

它表示在其它指

最低0.47元/天 解锁文章
css选择器有哪些？优先级？
祈澈菇凉
11-06 169
CSS 选择器的优先级用于确定当多个选择器同时应用于同一个元素时，哪个选择器的样式规则将被应用。如果多个选择器具有相同的优先级，则根据 CSS 的层叠规则（Cascading Rules）来确定应用的样式。通常情况下，后面出现的样式规则会覆盖前面的样式规则。CSS 选择器用于选择 HTML 文档中的元素，并为其应用样式。
CSS 优先级算法如何计算？
liuhao9999的博客
03-23 3808
相关知识点： CSS的优先级是根据样式声明的特殊性值来判断的。 选择器的特殊性值分为四个等级，如下： （1）标签内选择符x,0,0,0 （2）ID选择符0,x,0,0 （3）class选择符/属性选择符/伪类选择符 0,0,x,0 （4）元素和伪元素选择符0,0,0,x 计算方法： （1）每个等级的初始值为0 （2）每个等级的叠加为选择器出现的次数相加 （3）不可进位，比如0,99,99,99 （4）依次表示为：0,0,0,0 （5）每个等级计数之间没关联 （6）等级判断从左向右，如果某一位数值.
CSS有哪些选择器，如何计算优先级？（二）
vens37的博客
07-18 211
声明冲突： 同一个元素，属性名相同，属性值不同，就产生了“声明冲突”，浏览器会自动触发层叠机制 层叠是一种机制，用于解决css声明冲突，是自动触发完成的。   层叠的过程： 一般由于我们在开发中不会只是简单的样式，而是很多的样式在一起，那么就需要一个规则去辨别最后渲染的样式； CSS的层叠特性就是让样式层叠在一起，通过特殊性、重要性、来源及继承机制来排列层叠样式的顺序及选出胜出者。   在不考虑来源的情况下，！important最高。 ! important写在css申明的分号里面 一
CSS学习笔记4——盒子模型
最新发布
2401_88591507的博客
03-26 1672
在CSS中，每个元素就像这个衣柜。它不仅包含内容，还有围绕内容的空间（内边距）、保护内容的边界（边框）以及与其他元素保持距离的区域（外边距）。这就是所谓的“盒子模型”。
CSS选择器：基本选择器、复合选择器、伪类选择器、伪元素选择器
pan_junbiao的博客
07-11 3139
CSS选择器包含：基本选择器、复合选择器、伪类选择器、伪元素选择器。基本选择器包括：元素选择器、类选择器、ID 选择器、属性选择器。最常见的 CSS 选择器是元素选择器。换句话说，HTML文档的元素就是最基本的选择器。例如设置 HTML 样式，选择器通常是某个 HTML 元素，如 p、h1、a 等，甚至可以是 HTML 本身。在 HTML 中，各种各样的属性可以给元素添加很多附件信息，并且可以通过 JavaScript 控制这些附加属性的内如何状态。在使用 CSS 的时候，也可以使用这些附加属性来指定元素。
CSS有哪些选择器，如何计算优先级？（一）
vens37的博客
05-31 343
1、什么是CSS选择器？ 前面介绍了HTML和CSS的概述及结构，大体了解到HTML用于描述页面的结，而CSS用于控制页面中元素的样式。那么，CSS是如何控制元素来添加相应的样式呢？ 这就涉及到css里面选择器的规则了，CSS选择器主要的功能就是选中想要添加样式的元素，选择器就是用来匹配元素的，必须是要选中（书写正确）才可以给HTML页面中各种元素添加样式。 当然，有时候选择器也会涉及到继承、声明冲突可能会选不中，后面会详细介绍。 2、基本选择器 选择器最终选中的是离大括号最近的元素 通配选择
CSS的选择器有哪些？哪些属性可以继承？优先级算法如何计算？
qq_39750019的博客
03-04 313
id # class . 标签 div p 相邻 ul+div 子ul>li 后ul li 通配 * 属性a[href=’'xxxx"] 伪类 a:after a:hover CSS中哪些可以继承：color font-size 优先级算法如何计算：!important > 行内 > id > class > tag ...
CSS选择器有哪些？ 优先级？ 哪些属性可以继承？
weixin_46820017的博客
03-05 513
如果存在内联样式 ， 那么 A = 1 , 否则 A = 0。C的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数。内联 > ID选择器 > 类选择器 > 标签选择器。D 的值等于 标签选择器 和 伪元素 出现的总次数。h1 -h6标签字体的大下也是不能被继承的。B的值等于 ID选择器出现的次数。a 标签的字体颜色不能被继承。
css选择器优先级顺序是什么？css基本选择器的介绍
weixin_56134381的博客
03-19 5129
样式优先级原则 总的原则 1.CSS规定拥有更高确定度的选择器优先级更高 2.如果样式中包含冲突的规则，且它们具有相同的确定度。那么，后出现的规则优先级高。 优先级：由高到低(从上到下) !important 内联(1,0,0,0) id: (0,1,0,0) 类：(0,0,1,0) 伪类/属性 元素：(0,0,0,1) 通配符 类选择器 class=“web”,多个元素可以拥有同一个类名 id选择器 id=“web”,具有唯一性 伪类选择器 CSS伪类（pseudo-class）是加在选择器后面的用来指定
详解CSS中的选择器优先级顺序
09-24
了解并熟练运用CSS选择器优先级顺序，可以帮助开发者更精确地控制元素的样式，避免不必要的样式冲突，从而提高代码的可读性和维护性。在实际开发中，尽量减少对 `!important` 的依赖，因为它会使代码难以管理和调试...
CSS的选择器？优先级算法如何计算？CSS3新增的伪类有哪些？
CKT0816的博客
03-08 254
一，css选择器： 　　1.id选择器（#myid） 　　2.类选择器（.myclassname） 　　3.标签选择器（div, h1, p） 　　4.相邻选择器（h1 + p） 　　5.子选择器（ul > li） 　　6.后代选择器（li a） 　　7.通配符选择器（ * ） 　　8.属性选择器（a[rel = “external”]） 　　9.伪类选择器（a:hover, li:nth-...
CSS选择器有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先？
sjinsa的博客
04-25 6809
CSS选择器有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先？ 选择符类型 例子 例子描述 通用选择器 * 类别选择器(.class) .intro 选择class=”intro”的所有元素 ID选择器(#id) #first 选择id=”first”的所有元素 标签选择器(element
【前端面试之CSS】css选择器的分类优先级以及优先级的计算
阿卡内的博客
07-20 1034
css选择器的分类优先级以及优先级的计算
最全的CSS选择器优先级算法，看这篇就够了
笑望灬星辰
04-02 222
CSS优先级算法 优先级就近原则，同权重情况下样式定义最近者为准 载⼊样式以最后载⼊的定位为准 优先级为: 内联样式!important > !important > 内联样式 > id > class > tag > 伪类;
css有哪些选择器 优先级如何
weixin_46962784的博客
11-03 521
css有哪些选择器 优先级如何 总的选择器有： 　 　 1.标签选择器(如：body,div,p,ul,li) 2.类选择器(如：class=“head”,class=“head_logo”) 3.ID选择器(如：id=“name”,id=“name_txt”) 4.全局选择器(如：*号) 5.组合选择器 a.后代选择器(以空格 分隔) b.子元素选择器(以大于 > 号分隔） c.相邻兄弟选择器（以加号 + 分隔） d.普通兄弟选择器（以波浪号 ～ 分隔） 　组合选择器https://www.
说说CSS选择器的类型有哪些，优先级
m0_49456900的博客
02-11 379
标签（元素）选择器、id选择器、类选择器、后代选择器、属性选择器、伪类选择器、通配符等。 优先级：!important->行内样式->#id->.class->元素和伪元素->*->继承->默认 ...
CSS选择符有哪些?优先级算法如何计算?内联和 Important哪个优先级高？
weixin_48527151的博客
07-04 806
CSS选择符有类选择符，属性选择符，ID选择符，优先级算法是基于特殊性值进行计算的。分别如下： ID属性 0.1.0.0 类属性选择器，属性选择器，伪类 0.0.1.0元素选择符，伪元素选择符 0.0.0.1 通配选择器对特殊性没有任何贡献值。 important优先级高 ...
CSS选择器有哪些？哪些属性可以继承？CSS优先级算法如何计算？
05-24
CSS选择器包括元素选择器、类选择器、ID选择器、属性选择器、伪类选择器、伪元素选择器等。 CSS中可以继承的属性包括字体系列、字号、字重、颜色、行高、列表样式、文本系列、文本装饰、文本缩进、文本对齐等。 CSS优先级算法根据以下规则计算： 1. 样式表中!important声明的优先级最高，即使在后面出现也优先应用； 2. 行内样式优先级次之，即在标签内部使用style属性定义的样式； 3. ID选择器的优先级高于类选择器和标签选择器； 4. 通用选择器和子选择器的优先级较低； 5. 如果两个或多个选择器具有相同的优先级，则使用后面的选择器覆盖前面的选择器。 例如，选择器div.container .text p#intro中，div.container的优先级为0-0-1-1，.text的优先级为0-0-1-0，p#intro的优先级为0-1-0-1，因此，p#intro会覆盖前面的选择器。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值