css权重问题
权重决定了你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权重问题的更多相关文章
- css权重计算方法浅谈
在这之前只知道css权重的皮毛,比如说:行内权重比头部权重高,头部比外部样式权重高----工作中才知道真正理解css权重重要性.理解权重了才能写出来最优css选择器来.对后面学习less,scss有很 ...
- css权重是什么
css权重是什么? 概述 css Specificity中文一般译为css优先级.css权重.相比"权重","优先级"更好理解,mozilla官方中文文档就翻译 ...
- CSS:权重和层叠规则决定了其优先级
首先,给大家看一篇关于CSS优先级的示例:http://www.ido321.com/76.html 一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级 ...
- css权重及优先级问题
css权重及优先级问题 几个值的对比 初始值 指定值 计算值 应用值 CSS属性的 指定值 (specified value)会通过下面3种途径取得: 在当前文档的样式表中给这个属性赋的值,会被优先使 ...
- CSS优先级的及其衡量标准CSS权重
一.背景 CSS有三大特性:层叠性.继承性.优先级. 而我们在给CSS定义样式的时候,经常出现两个及以上的规则应用在同一元素上,单该元素最终在浏览器呈现的效果是应用的哪个规则呢?这就要考虑优先级的问题 ...
- vue mand-mobile ui加class不起作用的问题 css权重问题
vue mand-mobile ui加class不起作用的问题 css权重问题组件的样式优先权比自己定的class高多加几层权重才行,要直接用样式覆盖也可以在前面多加几层class,定位更精确了才会覆 ...
- css权重 vs 浏览器渲染 -- css之弊病
昨日,突现一个bug,令人十分恼火. 基本场景 自己实现一多选日历,可多选多天(相连或不相连均可)."贵司"的需求真心有些小复杂了,"市面"上没有这样的相似的东 ...
- Css权重解析
Css权重解析 关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准 具体规范入如下: spec ...
- CSS权重的等级划分
CSS权重 CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式. 权重的等级 可以把样式的应用方式分为几个等级,按照等 ...
- 盒模型 | CSS权重 | CSS层叠
span{ color:red;} *{ font-family:"楷体";line-height:2em; font-size:18px;} 盒模型 CSS定义所有的元素都可能拥 ...
随机推荐
- Android 程序分析环境搭建-开发环境搭建
1.1 JDK 安装 JDK 的配置,初学java 开发,那是必须会的. 下载,遇到的问题就是要注册oracle 的账号,还有你要下载特定版本,比如jdk 1.7,jdk 1.6,很难找到在哪里.解 ...
- Linux Pptpd
准备环境 1 主机ip:192.168.0.107 2 VPN服务器: ens32:192.168.0.102 ens33:127.16.1.10 软件安装 [root@localhost ~]# y ...
- Jmeter工具使用初体验
一.Jmeter组成部分 一个完整的脚本必须包含以下三项,他们都在测试计划的子选项中,我们直接在测试计划上右键选择即可 线程组 取样器 监视器 二.脚本编写 1.创建线程组 2.添加取样器 我们这里添 ...
- 一步一步搭建 Oracle Data Guard
前言 为什么要写前言,因为我要吐槽一下.作为一个Java后端,搭建Oracle Data Guard真的是一件,嗯,既不专业也不擅长的事情,然而,为什么还是要我来弄? 因为DBA出差了,我们这边急着要 ...
- 龙芯电脑上Electron应用开发
背景 最近在一台龙芯电脑(系统是中兴新支点,Linux)上开发electron应用. PS:龙芯是国产的cpu,采用是mips架构,类似x86.arm. 安装NodeJS 安装步骤请查看:https: ...
- My97DatePicker-WdatePicker日历日期插件详细示例
<!DOCTYPE html> <html> <head> <title>排行</title> <meta charset=" ...
- C lang:Protect array data——Const
Xx_Introduction Use pointer translate parameter array original data will change data,and use const p ...
- Flutter学习笔记(26)--返回拦截WillPopScope,实现1秒内点击两次返回按钮退出程序
如需转载,请注明出处:Flutter学习笔记(26)--返回拦截WillPopScope,实现1秒内点击两次返回按钮退出程序 在实际开发中,为了防止用户误触返回按钮导致程序退出,通常会设置为在1秒内连 ...
- 从0系统学Android--3.7 聊天界面编写
从0系统学Android--3.7 聊天界面编写 本系列文章目录:更多精品文章分类 本系列持续更新中.... 3.7 编写界面的最佳实践 前面学习了那么多 UI 开发的知识,下面来进行实践,做一个美观 ...
- OpenTSDB 简单使用 .NET
OpenTSDB是基于Hbase的时序数据库[时间序列数据库].不具备通用性,主要针对具有时间特性和需求的数据,如监控数据.温度变化数据等. 1.安装OpenTSDB 安装前一定要安装HBase,相关 ...