css权重是什么意思?

什么是CSS的权重?对于前端工程师来说,这是一个很基础的问题,如果前端工程师没有深刻理解这个概念,则很难写出高质量的CSS代码。

讨论CSS的权重,则必须想了解而且是深刻的了解CSS样式的6种基础选择器:

  • id选择器(#box{})

  • 类选择器(.box{})

  • 属性选择器(a[href="http://www.xxx.com"])

  • 伪类和伪对象选择器(:hoevr{}和::after{})

  • 标签类型选择器(p{})

  • 通配符选择器(*{})

所有在CSS样式中定义的选择符都是由这6种基础选择符组合而成的,组合的方式也分为三种:后代选择符、子选择符、相邻选择符。

CSS的权重指的是这些选择符的优先级,优先级高的CSS样式会覆盖优先级低的样式,优先级越高说明权重越高,反之亦然。

按照规则,基础选择器具有这样的优先级:

ID > 类 | 伪类 | 属性选择 > 标签类型 | 伪对象 > 通配符

权重决定了你css规则怎样被浏览器解析直到生效。css权重关系到你的css规则是怎样显示的

权重记忆口诀:从0开始,一个行内样式+1000,一个id+100,一个属性选择器/class或者伪类+10,一个元素名,或者伪元素+1

通用标签ID类,选择包含加伪类

类型权重
! important无穷
行间样式1000
id100
class/属性选择器/伪类:hover10
标签选择器/伪元素:after1
通配符0
01. *{}                         ====》0
02. li{}                        ====》1(一个元素)
03. li:first-line{}             ====》2(一个元素,一个伪元素)
04. ul li {}                    ====》2(两个元素)
05. ul ol+li{}                  ====》3(三个元素)
06. h1+ *[rel=up] {}            ====》11(一个属性选择器,一个元素)
07. ul ol li.red{}              ====》13(一个类,三个元素)
08. li.red.level{}              ====》21(两个类,一个元素)
09. style=""                    ====》1000(一个行内样式)
10. p {}                        ====》1(一个元素)
11. div p {}                    ====》2(两个元素)
12. .sith {}                    ====》10(一个类)
13. div p.sith{}                ====》12(一个类,两个元素)
14. #sith{}                     ====》100(一个ID选择器)
15. body #darkside .sith p {}   ====》112(1+100+10+1,一个Id选择器,一个类,两个元素)

以上就是css权重是什么意思?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读

    Python之可迭代对象、迭代器、生成器

    Python之可迭代对象、迭代器、生成器,迭代,生成器,一、概念描述可迭代对象就是可以迭代的对象,我们可以通过内置的iter函数获取其迭代器,可

    应用程序对象

    应用程序对象,,应用程序对象是一个应用程序级对象,用于在所有用户之间共享信息,并且在Web应用程序运行期间可以保存数据。 应用的性质: 方法

    Java创建对象的几种方式

    Java创建对象的几种方式,对象,方法,本文目录Java创建对象的几种方式java中几种创建对象的方式1Java中创建对象的集中方式有那些JAVA创建对

    wps快速的编辑图层|WPS巧用对象图层

    wps快速的编辑图层|WPS巧用对象图层,图层,编辑,快速,wps,1.WPS 如何巧用对象图层一、认识对象图层工具及按纽1、您可以在插件工具栏中可以

    空对象快捷键|空白对象快捷键

    空对象快捷键|空白对象快捷键,,空白对象快捷键以win7系统为例1.在键盘上找到Ctrl➕alt➕delete同时按下2.出现下图界面后,在右下角找到红色

    选择对象快捷键|对象全选的快捷键

    选择对象快捷键|对象全选的快捷键,,对象全选的快捷键第一种最常用最实用的Ctrl+鼠标多选单击选择一个文件夹或文件,然后左手按着“Ctrl”键