css-选择器权重计算方式

最新推荐文章于 2026-01-05 11:04:12 发布

原创最新推荐文章于 2026-01-05 11:04:12 发布 · 132 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

博客介绍了CSS选择器的优先级，如!important优先级最高，内联和外联样式次之，还提及同一级别后写覆盖先写。同时说明了CSS选择器定位DOM元素是从右往左解析，可尽早过滤不必要的样式规则和元素。

优先级：!important > 内联样式 = 外联样式 > ID选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 元素选择器 = 伪元素选择器 > 通配选择器 = 后代选择器 = 兄弟选择器

属性后面加!import会覆盖页面内任何位置定义的元素样式
作为style属性写在元素内的样式
id选择器
类选择器
标签选择器
通配符选择器（*）
浏览器自定义或继承

同一级别：后写的会覆盖先写的

css选择器的解析原则：选择器定位DOM元素是从右往左的方向，这样可以尽早的过滤掉一些不必要的样式规则和元素

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Sink_web

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Css选择器权重排序详解+权重计算

weixin_45230574的博客

11-20

1668

最详细的Css权重详解、权重排序以及如何加强权重

heyunjiang#Blog#深入css-选择器及权重1

07-25

2.1 权重分配规则 2.2 权重比较规则 2.3 实例 2.1 权重分配规则 2.2 权重比较规则 2.3 实例 3.1 伪类选择器

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

CSS篇：CSS选择器详解与权重计算全指南

欢迎来到我的前端博客！这里汇集了关于前端开发的最新技术、实用工具和经验分享。我将为你提供详细的教程、代码示例和实战案例，帮助你掌握Web开发的核心概念和技能。不论你是初学者还是有经验的开发者，这个博客都适合你。

04-12

1440

CSS选择器是前端开发的基石，合理使用选择器不仅能精确控制页面样式，还能提高代码的可维护性。本文将系统介绍CSS选择器的各种类型，并深入解析CSS权重计算规则，帮助开发者避免常见的样式冲突问题。

CSS选择器的权重计算

Wendy

02-28

4788

刚好是在做面试题的时候，发现有一个题目时关于CSS选择器的权重计算，当时脑海中只知道：id>class>元素选择器，外联样式优先级低于内联样式，内联样式优先级低于行间样式，至于权重的计算其实没有多大的印象，所以就来总结一下，避免以后遇见了还是不太懂。作为前端开发人员，知道CSS选择器的权重还是非常重要的。在讲解计算规则之前，先来大概再了解下具体的CSS选择器有哪些，才可以更方便的知道权

CSS选择器种类和权重计算

xiyang9520的博客

04-17

1707

CSS选择器和权重计算。

CSS选择器与权重计算（详细）

weixin_44164982的博客

07-09

1151

在前端三大基础中，html负责结构，css负责样式，js负责行为。css写在head标签里面，容器style标签。先写选择器，然后写大括号，大括号里面是样式。常见的选择器类型有以下几种： 1、标签选择器（无论嵌套多少层都能找到）就是用标签名来当做选择器。 1）所有标签都能够当做选择器，比如body、h1、dl、ul、span等等 2）不管这个标签藏的多深，都能够被选择上。 3）选择的是所有的，而不是某一个。所以是共性，而不是特性。例如，大多数网站的a标签都设置了去掉了下划线的效..

CSS选择器及其权重

OUTSIDER_2023的博客

11-08

1160

伪类：类选择器的一种，特殊的类，不存在的类，不是特指某个元素，必须达成摸个条件才会选中例如：鼠标移入，最后一个，第几个等

css选择器权重排序_css选择器的权重计算

weixin_39624360的博客

12-22

1595

首先归纳一下最基本的css优先级。从CSS代码存放位置看权重优先级：内嵌样式 > 内部样式表 > 外联样式表。其实这个基本可以忽视之，大部分情况下CSS代码都是使用外联样式表。从样式选择器看权重优先级：important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符。那么样式选择器中又是如何...

CSS--选择器--使用/教程

IT利刃出鞘的博客

11-06

1660

原文网址：简介说明本文介绍CSS的选择器用法。包括：优先级，基本选择器，分组选择器，层次选择器，伪类选择器，伪元素选择器。官网 CSS 选择器 - CSS（层叠样式表） | MDNCSS 参考 - CSS（层叠样式表） | MDN 优先级简介给一个p标签增加一个类（class），可是执行后该class中的有些属性并没有起作用。通过Firebug查看，发现没有起作用的属性被覆盖了。这个时候CSS选择器优先级的问题了。详解 CSS选择器的优先...

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

WangMin@汪末末

10-02

590

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

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

coder-quan的博客

09-14

5526

今天面试面试面试官提问了选择器优先级的问题，本身是知道这个问题的答案的，由于第一次面试紧张，各种选择器的名字被置于脑后，一切的根源还是因为不够熟悉，所以通过这篇博客加强并深入了解选择器优先级的问题。一、选择器优先级： !Important>行内样式>ID 选择器>类选择器>标签选择器>通配符>继承>浏览器默认属性 !important：!important拥有最高的优先级，加上!importanrt可以覆盖父级的样式，使用方法为直接在样式后添加加上!impo

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

12-14

3. 外部样式：通过`<link>`标签链接到外部CSS文件中的样式，其权重同样取决于选择器。接下来，我们来看选择器的权重计算规则： 1. ID选择器，如`#content`，权值为0100。 2. 类选择器、伪类和属性选择器，如`....

练习前端-CSS权重计算、复杂选择器、基础属性-day05

08-31

本练习主要关注CSS的权重计算、复杂选择器以及基础属性，这些都是构建高效且可维护的CSS代码的关键要素。首先，我们要了解CSS权重计算。权重决定了哪些样式会应用到元素上，当多个选择器对同一个元素定义了样式时...

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

04-16

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

深入理解CSS弹性布局：构建现代响应式网页的

HANhylyxy的博客

01-03

764

结论弹性布局是现代CSS中最实用的布局工具之一。通过掌握弹性布局，你可以轻松解决传统布局中的难题，创建出灵活、响应式的界面。虽然它只是CSS布局生态系统的一部分（与网格布局、多列布局等并存），但在处理一维布局需求时，弹性布局通常是首选工具。开始在你的项目中实践弹性布局吧！从简单的导航栏到复杂的卡片布局，你会发现许多曾经棘手的布局问题现在都能迎刃而解。

【:has()】 CSS关系性伪类介绍及实战

最新发布

qq_45796592的博客

01-05

599

摘要：本文介绍了CSS选择器:has()的实用技巧与应用场景。文章详细讲解了:has()的语法规则，包括后代选择、子节点选择、兄弟选择等，并提供了10个实用场景代码示例。也讨论了性能优化和浏览器兼容性方案，大幅提升了开发效率和用户体验。

cssTab卡片式

weixin_73251435的博客

12-30

529

代码//顶部tab切换部分<div</div></div>//下方块数据部分</div></div>css部分.tab {&-item {&:before {left: 100%;

html\css\js（一）

gaxing4615的博客

01-04

221

事件发生以后，会作为一个参数传递给监听函数。

用FastAPI 后端和 HTML/CSS/JavaScript 前端写一个博客系统例

PieroPc的博客

01-04

735

本文介绍了一个基于前后端分离架构的博客系统，采用HTML/CSS/JavaScript前端和FastAPI后端。系统结构清晰，分为backend和frontend目录，分别包含后端API和前端页面代码。后端使用FastAPI框架实现RESTful API，包含文章增删改查功能，采用Pydantic进行数据验证，并内置了示例数据。前端通过JavaScript调用API实现交互功能。系统支持跨域请求，提供了完整的博客管理功能，包括文章创建、查看、更新和删除等操作。该架构简洁高效，适合小型博客系统的开发需求。

css选择器权重计算

08-23

CSS选择器的权重计算是通过CSS Specificity（特殊性）来确定的。在计算权重时，可以按照以下规则进行计算： 1. 选择器的特殊性由选择器本身的组成部分决定，包括元素选择器、类选择器、id选择器和内联样式。通常来说，id选择器的特殊性最高，其次是类选择器和属性选择器，再次是元素选择器。 2. 对于相同特殊性的选择器，后面出现的选择器会覆盖前面出现的选择器。 3. 使用!important声明的样式具有最高的特殊性，将覆盖其他所有的样式。根据上述规则，可以用以下公式来计算选择器的权重： - id选择器：权重为1，例如#myId{} - 类选择器、属性选择器或伪类选择器：权重为10，例如.class{}、[type="text"]{}、:hover{} - 元素选择器或伪元素选择器：权重为100，例如div{}、::before{} - 内联样式：权重为1000，例如<div style="color:red;"> 在计算完各个选择器的权重后，具体的权重比较规则是：按照权重从左到右依次比较，权重值较大的样式会覆盖权重值较小的样式。需要注意的是，CSS权重计算只适用于冲突的样式规则。如果没有发生冲突，那么所有样式规则都会生效。总结起来，CSS选择器的权重计算是通过特殊性来确定的，特殊性由选择器本身的组成部分决定，而权重比较是按照权重从左到右依次比较的原则。这样，在编写CSS样式时，我们可以更好地控制样式的优先级。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [CSS选择器与权重计算（详细）](https://blog.youkuaiyun.com/weixin_44164982/article/details/107227294)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [CSS选择器的权重计算](https://blog.youkuaiyun.com/u010297791/article/details/58602255)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]