CSS权重

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

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

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

类型 权重
! important 无穷
行间样式 1000
id 100
class/属性选择器/伪类:hover 10
标签选择器/伪元素:after 1
通配符 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选择器,一个类,两个元素)</pre>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、css的语法规则 由css选择器(selector),以及一条或多条声明组成,用冒号分开 举例:selecto...
    疯狂的蜗牛Dianna阅读 1,347评论 0 0
  • 这篇是基于CSS选择器的,如果对选择器不太了解可以先看另一篇CSS选择器 (一)什么是CSS权重? 权重决定了你C...
    07120665a058阅读 2,197评论 2 4
  • 原文 博客原文 大纲 1、CSS层叠2、CSS权重3、权重等级4、权重的规则5、!important 1、CSS层...
    前端路上的小兵阅读 301评论 0 2
  • 场景 为什么我在这里设置的css样式不起作用?可能你在某处定义了一个更高权重的规则,导致此处规则不生效。 什么是权...
    seafruit阅读 275评论 1 1
  • 对于 CSSer 来说,多多少少都会遇到过 “样式规则不生效?”、“样式规则被覆盖?” 等等问题,这些都与 CSS...
    西山以南阅读 758评论 0 4