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

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

类型 权重
! 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>

原作者:
作者:Cherry丶小丸子
链接:https://www.jianshu.com/p/983ff63adaa6

css权重问题的更多相关文章

  1. css权重计算方法浅谈

    在这之前只知道css权重的皮毛,比如说:行内权重比头部权重高,头部比外部样式权重高----工作中才知道真正理解css权重重要性.理解权重了才能写出来最优css选择器来.对后面学习less,scss有很 ...

  2. css权重是什么

    css权重是什么? 概述 css Specificity中文一般译为css优先级.css权重.相比"权重","优先级"更好理解,mozilla官方中文文档就翻译 ...

  3. CSS:权重和层叠规则决定了其优先级

    首先,给大家看一篇关于CSS优先级的示例:http://www.ido321.com/76.html 一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级 ...

  4. css权重及优先级问题

    css权重及优先级问题 几个值的对比 初始值 指定值 计算值 应用值 CSS属性的 指定值 (specified value)会通过下面3种途径取得: 在当前文档的样式表中给这个属性赋的值,会被优先使 ...

  5. CSS优先级的及其衡量标准CSS权重

    一.背景 CSS有三大特性:层叠性.继承性.优先级. 而我们在给CSS定义样式的时候,经常出现两个及以上的规则应用在同一元素上,单该元素最终在浏览器呈现的效果是应用的哪个规则呢?这就要考虑优先级的问题 ...

  6. vue mand-mobile ui加class不起作用的问题 css权重问题

    vue mand-mobile ui加class不起作用的问题 css权重问题组件的样式优先权比自己定的class高多加几层权重才行,要直接用样式覆盖也可以在前面多加几层class,定位更精确了才会覆 ...

  7. css权重 vs 浏览器渲染 -- css之弊病

    昨日,突现一个bug,令人十分恼火. 基本场景 自己实现一多选日历,可多选多天(相连或不相连均可)."贵司"的需求真心有些小复杂了,"市面"上没有这样的相似的东 ...

  8. Css权重解析

    Css权重解析 关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准 具体规范入如下: spec ...

  9. CSS权重的等级划分

    CSS权重 CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式. 权重的等级 可以把样式的应用方式分为几个等级,按照等 ...

  10. 盒模型 | CSS权重 | CSS层叠

    span{ color:red;} *{ font-family:"楷体";line-height:2em; font-size:18px;} 盒模型 CSS定义所有的元素都可能拥 ...

随机推荐

  1. idea上传项目到github

    1.在上传项目之前需要先在idea中确认两个配置,一个是git的执行位置,电脑上没有安装git的需要提前安装(下载git软件并且安装,非github desktop),安装之后再idea的settin ...

  2. leetcode菜鸡斗智斗勇系列(3)--- Jewels and Stones珠宝和钻石

    1.原题: https://leetcode.com/problems/jewels-and-stones/ You're given strings J representing the types ...

  3. webpack生成的css文件background-image url图片无法加载

    之前在使用webpack3构建基于less预处理的项目时,在对指定的元素使用background-image: url(xxx)来设置背景图片时,本地开发是ok的,但是在项目编译产出后背景图片就找不到 ...

  4. C#线程学习笔记二:线程池中的工作者线程

    本笔记摘抄自:https://www.cnblogs.com/zhili/archive/2012/07/18/ThreadPool.html,记录一下学习过程以备后续查用. 一.线程池基础 首先,创 ...

  5. VS2008 激活

    序列号:PYHYP-WXB3B-B2CCM-V9DX9-VDY8T 如果没有序列号输入框需要使用crackvs2008forwindows7工具进行修复

  6. sklearn集成支持向量机svm.SVC参数说明

    经常用到sklearn中的SVC函数,这里把文档中的参数翻译了一些,以备不时之需. 本身这个函数也是基于libsvm实现的,所以在参数设置上有很多相似的地方.(PS: libsvm中的二次规划问题的解 ...

  7. Java中"或"运算与"与"运算快慢的三三两两

    先上结论 模运算比与运算慢20%到30% 这是通过实验的方式得到的结论.因为没有大大可以进行明确指导,所以我以最终运行的结果为准.欢迎指正. 测试代码 @Test public void test10 ...

  8. JMS消息中间件

    1.什么是消息中间件 消息中间件利用高效可靠的消息传递机制进行平台无关的数据交流,并基于数据通信来进行分布式系统的集成.通过提供消息传递和消息排队模型,它可以在分布式环境下扩展进程间的通信.对于消息中 ...

  9. Appium(二):Node.js下载与安装、非GUI版本appium下载与安装、GUI版本appium下载与安装

    1. 下载并安装Node.JS 进入官网:https://nodejs.org/en/. 由于我们是新手嘛,所以肯定是越稳定越好啦,所以选择下载LTS版本. 进入文件下点击文件就进入安装界面了,点击n ...

  10. Python的map方法的应用

    Map方法,第一个参数要写一个匿名函数表达式,或者是一个函数引用,第二个第三个往后都是表达式用到的参数,参数一般是可迭代的 1.比如下面这个map方法,两个参数,第一个 lambda x: x*x是匿 ...