CSS选择器权重问题

置顶 Slxa 安.

已于 2022-08-23 14:22:30 修改

阅读量221

点赞数 14

文章标签： html 前端 css

于 2022-07-15 11:46:43 首次发布

本文链接：https://blog.csdn.net/qq_52813099/article/details/125801244

版权

1选择器的权重

01.内联样式 1000

02. id选择器 100

03.类和伪类选择器/属性选择器 10

04.元素选择器 1

05.通配符、子选择器、相邻选择器等。如*、>、+ 0000

06.继承的样式没有优先级

!important 最高优先级

注意：

比较优先级时，需要将所有选择器的优先级进行相加计算，最后优先级越高，则优先显示

(并集选择器)分组选择器是单独计算的

如果优先级计算后相同，此时则优先使用靠下的样式

选择器的累加，不会超过上一级数量级，例如：类选择器再高也不会超过id选择器量变达不到质变

一般来说：

选择器越具体，优先级越高

!important 慎用

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Slxa 安.

关注关注

14
点赞
踩
10

收藏

觉得还不错? 一键收藏
10
评论
CSS选择器权重问题

摘要：关于css选择器权重问题
复制链接

扫一扫

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

04-16

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

css中的选择器及其权重

TKOP_的博客

12-18

9998

总结复习css中的选择器部分的知识，巩固元素选择器、id选择器、类选择器、通配选择器、后代选择器、子代选择器、并集选择器、伪类选择器、结构伪类选择器和伪元素选择器的内容。并进一步明确他们的权重。.........

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

css选择器权重问题

soos的博客

12-05

291

css选择器简单分为标签选择器、类选择器、id选择器以及通配选择器，那么选择器的优先级是怎么排序的呢？优先级：ID选择器>类选择器>标签选择器>通配选择器。当然除了这四种基本选择器还有很多的组合选择器，那么组合选择器的优先级怎么计算呢？我们通常通过选择器的权重进行计算，各选择器的基本权重如下：那么组合选择器的权重就是个选择器的权重之和，权重大的优先级就高，就优...

css选择器（一）--- 权重问题

wind的博客

03-08

318

important 权重10000（最大）内联 style='' //权重1000（仅次于 !important） ID选择器 #content'' //权重100 类、伪类、属性选择器 权重10 1.类： .content 2 伪类：同一个标签，根据其不同的种状态，有不同的样式。用冒号来表示。比如a标签 a:link{ /*点击之前 */ } a:visited{ /*被访问过之后 */ } a:hover{ /*鼠标悬停 */ } a:ac

CSS权重问题

zhenghaohan1999的博客

09-20

1768

最近在写官网项目，CSS的权重问题有点头疼，经常会写A元素的样式代码却影响了B的样式，有时候不回头再看一次网页还真发现不了。毕竟自己不可能记住全部的代码，那只能等到发现问题的时候，返回到原来的地方来处理了。上面的图片可以看到，footer的二维码被拉长了，原因是位于footer之前的代码，设定了img元素为高200px。解决方法之一就是找到影响的源头，修改影响源头的代码，把代码改成它...

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

09-24

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

对CSS选择器权重的认识(亲测)

09-22

在一个css页面中会使用很多的CSS选择器，至于它们的权重，想必很多的朋友都不是很清楚吧，下面本文通过测试为大家详细介绍下，看看究竟是怎么样的

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

12-14

最后，优化CSS样式时，应尽量利用选择器的权重规则解决问题，而不是过度依赖`!important`，这样可以保持CSS代码的可维护性和可读性。在遇到冲突时，先检查是否有更具体的、权重更高的选择器可以使用，或者调整已有...

CSS选择器权重演示.mp4

07-21

CSS选择器权重演示，实战编写CSS代码进行举例演示。

css中选择器的权重问题

qq_48802281的博客

06-22

205

css中选择器的权重问题

css选择器与权重问题——三、权重问题

my__road的博客

07-23

897

除了浮动之外，css权重问题是你要了解的，最复杂的一个概念之一。css每条规则权重的不同，是你所期望的效果，没有通过css规则在元素上生效的主要原因。为了减少调试bug的时间，你需要了解浏览器是怎样解析你的代码的。为了完成这个目标，你需要对权重是如何工作的，有一个清楚的认识。很多Css出现问题的场景，都是某处定义了一个更高权重的规则，导致此处规则不生效。 Css权重问题并不简单，而且有很多或具体或抽象的理论来解释这个问题。本文也将探讨这个问题，我相信如果你喜欢星球大战的话你肯定会理解这些概念的~ 我们将会讨

CSS的选择器的权重问题

天暗下来，你就是光

06-28

379

特殊性有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?我们来看一下面的代码： p{color:red;} .first{color:green;} <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>p和.first都匹配到了p这个标签上，那么会显示哪种颜色呢？green是正确的颜色，那么为什么呢？是因为

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

李留白

03-21

6763

不可继承的：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选择器权重问题

CodeJR

06-06

2071

Css选择器权重问题我们都知道，在利用HTML+CSS开发网站的时候，CSS的选择器有很多种，例如：行间样式，ID选择器，class类选择器，标签选择器等等，但是当一个标签包含多种选择器时，有作用的究竟是哪个选择器呢？例如以下代码：<html> <head> <title>CSS权重</title> <style> div{ ...

CSS选择器的权重

Sunny ic

05-13

2292

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

CSS选择器的权重问题

zheng_pika的博客

12-21

4374

css选择器的优先级，谁的优先级更高，不仅要看选择器还需要看权重要学会计算权重才能更好的引用想要的样式

CSS选择器之权重

weixin_48879289的博客

09-12

419

css有三个非常重要的属性，如层叠性、继承性、优先级；优先级就是我们所谓的权重，css的选择器权重不同，优先选择的样式也就不一样。权重有四位数字组成的，但是在相叠加的时候没有进位；下列是各类的权重： 选择器 选择器权重继承或* 0，0，0，0 元素选择器或标签选择器 0，0，0，1 类选择器或伪类选择器 0，0，1，0 ID选择器 0，1，0，0 行内样式style 1，0，0，0 important重要的 ∞无穷大通常会是类.

CSS3中选择器的权重问题

Jsy_997的博客

03-31

633

CSS3中的选择器权重问题。最后面写的样式也可能因为权重低的问题，而不能覆盖之前的样式。

CSS选择器权重解析与优先级规则

本文将深入探讨CSS选择器的权重与优先规则，这是理解CSS样式层叠和覆盖的关键。在CSS中，不同的选择器有不同的权重，决定了它们定义的样式...在实际开发中，明智地使用选择器权重可以避免不必要的复杂性和潜在的问题。