css属性优先级及权重值

最新推荐文章于 2025-09-04 16:57:24 发布

原创最新推荐文章于 2025-09-04 16:57:24 发布 · 138 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #前端

前端专栏收录该内容

13 篇文章

订阅专栏

CSS属性的优先级决定了哪些样式会应用到元素上，权重值影响着选择器的优先顺序。ID选择器具有100权重，类选择器、属性选择器和伪类选择器为10，元素选择器和伪元素选择器为1，继承样式权重为0。理解这一规则有助于编写更清晰、易维护的代码。

CSS 属性优先级控制哪些样式将被应用到元素上，权重是用于确定哪些样式优先级更高的值。下面是属性优先级和权重值的表格：

属性优先级	权重值
!important	Infinity
行内样式（style属性）	1000
ID选择器	100
类（class）选择器、属性选择器、伪类选择器	10
元素选择器、伪元素选择器	1
继承的样式	0

请注意，这些值是近似值，具体的计算和应用取决于CSS解析器和浏览器的具体实现细节。通常情况下，使用最具体和最低优先级可能会更易于理解和维护的代码。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

米酒馆

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

属性选择器 优先级

Fly_hello的博客

06-28

1871

1.属性选择器 ^ 表示属性以某一个字符开头，匹配以某一个字符开头的属性 span[test^="a"]{ color: rgb(200, 100, 100); } $ 匹配属性以某字符结尾的标签 span[test$="c"]{ color: green; } * 通配

HTML5和CSS3 WEB技术开发

张晨光老师的播客

01-02

7258

B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup

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

CSS样式（选择器）的优先级

weixin_43613849的博客

11-22

8029

第一优先级：无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。（ie6支持上有些bug）。第一等：内联样式，如：style="color:red;"，权值为1000.（该方法会造成css难以管理，所以不推荐使用）第二等：ID选择器，如：#header，权值为0100. 第三等：类选择器、如：.bar，权值为0010. 第四等：类型（标签）选择器和伪元素选择器，如：div ::first-line 权值为0001. 通配符，子选择器，相邻选择器等。

SpringBoot属性配置优先级

huanghong.top

05-05

1601

因此，在没有使用命令行参数的情况下，应用程序的属性值将是"Hello from myapp.properties"，因为myapp.properties是最高优先级的属性源。如果我们删除myapp.properties文件，则属性值将变为"Hello from bootstrap.properties"，因为bootstrap.properties是次高优先级的属性源。在Spring Boot中，应用程序可以使用多种方式来配置。

CSS第一章：9.选择器权重（选择器优先级）

励志成为会前后端、运维、云服务、嵌入式开发、AI和自动化技术的创业小老板！

04-27

3052

总览1.发生样式冲突的时候，到底应用哪个选择器的样，这是由选择器的权重（优先级）来决定的2.优先级不能通过累加来越界，无论多少个优先级0,0,1,0相加，都不能比1个优先级0,1,0,0更高。一、选择器权重排序 1.内联样式，优先级1,0,0,0 2.id选择器，优先级0,1,0,0 3.类和伪类选择器，优先级0,0,1,0 4.元素选择器，优先级0,0,0,1 5.通配选择器，优先级0,0,0,0 6.继承，无优先级，优先级最低。二、单个选择器权重比较 · 实际演示 1.存在一个元素选择器

标签属性和CSS样式的优先级的比较

WinstonLau的博客

04-17

2028

先看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>img标签</title> <style> img{ width: 600px; ...

CSS常用属性

已黑化的小白的博客

04-29

4722

一、属性和属性值的定义 1.引入 (1)每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值； (2)属性必须放在花括号中,属性与属性值用冒号连接 (3)每条声明用分号结束 (4)当一个属性有多个属性值的时候，属性值与属性值不分先后顺序，用空格隔开 (5)在书写样式过程中，空格，换行等操作不影响属性显示内部样式  <style> h1{ color:red; } </styl

CSS样式表样式优先级 选择器以及选择器的权重优先级

Odyssey_kd的博客

03-21

1454

css由选择符和声明组成，声明又分为属性和属性值属性必须放在花括号里面，属性与属性值必用冒号连接每条声明用分号结束当一个属性有多个属性值的时候，属性值与属性值部分先后顺序，用空格隔开在书写样式过程中、空格、换行等操作不影响属性显示。

CSS学习及响应式布局

liulllnzjsjjsbsb的博客

08-08

799

缺点：会隐藏溢出的元素) 方法2：在浮动元素下方添加空块元素，并给该元素添加声明：clear:both;1）:after(与content属性一起使用，定义在对象后的内容) 如：div:after{content:url(lodo.jpg)} div:after{content:"文本内容”；（1）模块中内容：挤压-拉（布局不变）（2）模块中内容：换行-平铺（布局不变）（3）模块中内容：删减-增加（布局不变）（4）模块位置变换（布局改变）（5）模块展示方式改变：隐藏-展开（布局改变)...

自己学习html+css的详细笔记

qq_53366282的博客

05-18

2028

目录常用符号： 6 有序列表：ol>li 6 无序列表：ul>li 7 自定义列表：dl>dt+dd 7 图片标签： 7 表格： 8 表单from： 8 CSS： 9 CSS优先级： 9 CSS选择器 10 伪类选择器： 10 CSS文本属性 11 1. 字体大小 11 2. 颜色 11 3. 加粗&倾斜 11 4. 水平垂直居中 12 5. 文本间距 12 6. 首行缩进 12 7. 文本修饰 12 8. Transform大小写 13

css详解

qq_45240472的博客

03-22

1801

1.1什么是CSS Cascading Style Sheet 层叠级联样式表 css：表现（美化网页）字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动 css的优势： 1.内容表现分离 2.网页结构表现统一 3.样式十分丰富 4.建议使用独立于html的css文件 5.利用SEO,容易被搜索引擎收录 1.3 CSS的三种导入方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

html+css仿制小米商城首页

最新发布

阿乐的博客

09-04

226

是指当页面元素的位置、尺寸等几何属性发生变化时，浏览器需要重新计算这些元素的几何属性并将其放置在正确位置的过程。是指当元素的外观发生改变，但没有改变布局时，浏览器重新绘制元素的过程。：在需要实现动画效果时，使用CSS动画和过渡，而不是JavaScript来操作元素样式。相对于重排，重绘的影响较小，因为它只需要重新绘制元素的样式，不需要重新计算布局信息。通过这些方法，可以有效地减少重排和重绘的次数，从而提高网页的响应速度和用户体验。修改元素的尺寸、位置、边距、填充、边框等样式属性。

HTML第五课：求职登记表

本人纯技术分享，各种语言和行业都会，且个人分享全部免费。请大家点一个免费的关注谢谢大家

09-02

554

【代码】HTML第五课：求职登记表。

【JavaWeb】之HTML(对HTML细节的一些总结)

2301_81776550的博客

09-01

1074

首先我们在把Java基础学习完之后，我们就要进行网站方面的开发了，我们要了解网页的组成，而网页的组成有HTML,CSS,JavaScript 所以我们就要从HTML开始了，下面我们开始进行学习。1. HTML（HyperText Mark-up Language）即超文本标签语言(可以展示的内容类型很多)2. HTML 文本是由HTML标签组成的文本，可以包括文字、图形、动画、声音、表格、链接等。

WHAT - HTMLRewriter 介绍（页面优化、SEO、广告注入）

weixin_58540586的博客

09-02

1347

等边缘计算平台，用来在 HTML 文档传输过程中，对响应内容进行实时解析、修改或增强，而无需等到整个文档下载完成再操作。当解析器遇到匹配的 HTML 元素时触发。👉 总结一句：HTMLRewriter。时触发（会被分块调用）。

css属性选择器优先级

05-14

具体来说，以下是影响CSS属性选择器优先级的因素： 1. 选择器中包含的ID选择器数量（#id） 2. 选择器中包含的类选择器、属性选择器和伪类选择器的数量（.class、[attr]、:hover等） 3. 选择器中包含的元素选择器和...