权重决定了你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. View 的绘制过程

    配合Activity 从启动到布局绘制的简单分析 阅读 基本概念介绍 Activity:一个 Activity 是一个应用程序组件,提供一个屏幕,用户可以用来交互. View:所有视图控件的基类 Vi ...

  2. AndroidStudio初识

    大家好,欢迎来到下码看花,伟大领袖毛爷爷曾经说过:“ ‘走马看花不如驻马看花,驻马看花不如下马看花.’我希望你们都要下马看花.”,比喻停下来,深入实际,认真调查研究,这就是咱们公众号名字的由来.与君初 ...

  3. oopday02(面向对象-构造方法&静态static)

    面向对象之封装 01_面向对象(构造方法Constructor概述和格式) * A:构造方法概述和作用 * 给对象的数据(属性)进行初始化 * B:构造方法格式特点 * a:方法名与类名相同(大小也要 ...

  4. 搭建API Mock

    所需环境 Node.js + MySQL 5.7+ Redis 4.0+ Node.js 安装 .要安装nvm,需要安装构建源包所需的工具,CentOS 上安装,用这些命令来安装构建工具: sudo ...

  5. https类型接口,关闭认证(verify=False)情况下消除告警的方法

    一.问题描述 当我们测试接口的协议为https时,当关闭了认证(verify=False)的时候,我们测试通过了,但是使用有一条警告显示,最终生成的测试报告也不美观,如下图 二.解决办法 我们可以在封 ...

  6. Choose the WinForms UI Type 选择 WinForms UI 类型

    In this lesson, you will learn how to change the UI Type of the WinForms application. By default, th ...

  7. postgreSQL安装教程 Windows

    Windows 上安装 PostgreSQL 这里使用 EnterpriseDB 来下载安装,EnterpriseDB 是全球唯一一家提供基于 PostgreSQL 企业级产品与服务的厂商. 下载地址 ...

  8. Ligg.EasyWinApp-102-Ligg.EasyWinForm:Function--ControlBox、Tray、Resize、Menu

    首先请在VS里打开下面的文件,我们将对源码分段进行说明: Function(功能):一个应用的功能界面,一个应用对应多个Function(功能):如某应用可分为管理员界面.用户界面. 首先我们来看一下 ...

  9. vue中使用element组件时事件想要传递其他参数的问题

    在使用element的上传组件时在一下几个钩子中传递其他参数 图中是文件上传时的几个钩子,参数为文件或文件列表或者其他参数,但是现在我想在原有参数上传递其他参数.比如我想在on-success的钩子中 ...

  10. js效果 整理

    整理中... 1.js获取页面及元素高度.宽度 其他参考文献:http://www.open-open.com/lib/view/open1420120422531.html js: 网页可见区域宽: ...