CSS学习(三)特指度和层叠
一、特指度
特制度的一般形式是0,0,0,0
- 行内样式,第一位的特指度加一
- id选择符,第二位的特指度加一
- 类选择符、属性选择符、伪类,第三位的特指度加一
- 元素选择符、伪元素,第四位的特指度加一
特指度是从左向右比较的,特指度高的声明胜出。
重要声明:在声明末尾的分号之前插入 !important( 重要声明和非重要声明冲突时,始终胜出 )
二、继承
继承指的是,某些样式不仅应用到所指的元素上,还应用到元素的后代上( 最典型的就是font-family )
下面是继承的两个注意点:
- 继承的值没有特指度,连0都没有,通用选择符( * )的特指度都比他大。所以最好不要在通用选择符里面设置可能继承的值( 除非你雀食要这么做 ),以免出现零特指度战胜无特指度的情况,导致终结继承。
- 继承的值没有特指度,但是有的时候样式无法继承,可能是因为浏览器的内部样式表里面有设置该样式( 浏览器设置的样式就有了特指度,导致无法继承 )
三、层叠
层叠规则先后顺序如下
- 按显示权重( !important )和来源排序( 创作人员样式表覆盖用户代理样式表 )
- 按特指度排序,特指度高的规则胜出
- 按前后位置排序,越靠后的规则胜出(由此可得链接样式的推荐样式:LVFHA)
CSS学习(三)特指度和层叠的更多相关文章
- CSS 优先级和特指度
1.ID 选择符 > 类选择符 > 元素选择符.特指度高的优先级高 2.行内样式 > 内嵌样式 > 链接样式 3.设定的样式 > 继承的样式 特指度的计算: 特指度能够用 ...
- Css学习(三)
1 行高 ◆浏览器默认文字大小 浏览器默认文字大小:16px 行高:是基线与基线之间的距离 行高=文字高度+上下边距 一行文字行高和父元素高度一致的时候,垂直居中显示. 行高的单位 总结:单位除了像素 ...
- 一篇文章带你初步了解—CSS特指度
CSS特指度 说明 这篇博客在在两台电脑上分别完成的,故而有些截图是Firefox,有些是Chrome,有些改动了浏览器的用户样式表,有些没改,但不会影响阅读,特此说明,勿怪. CSS选择器 单个CS ...
- css学习归纳总结(三) 转
原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...
- CSS 学习手册
目录 CSS 简介 1.CSS 简介 CSS 概述 层叠次序 2.CSS 基础语法 CSS 语法 值的不同写法和单位 记得写引号 多重声明: 空格和大小写 3.CSS 高级语法 选择器的分组 继承及其 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- css学习归纳总结(一) 转
原文地址:CSS学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00; } 3.属性 ...
- CSS学习目录
前面的话 CSS是前端工程师的基本功,但好多执迷于学习javascript的人的基本功并不扎实.可能一些人从w3school网站匆匆过了一遍,只是对CSS常用概念有一些表面上的理解,就一头扎进java ...
- css学习归纳总结
来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...
随机推荐
- [原创]OpenEuler20.03安装配置PostgreSQL13.4详细图文版
OpenEuler安装配置PostgreSQL 编写时间:2021年9月18日 作者:liupp 邮箱:liupp@88.com 序号 更新内容 更新日期 更新人 1 完成第一至三章内容编辑: 202 ...
- Jmeter系列(14)- Setup与tearDown线程组
与普通线程组区别 #Setup线程组:在普通线程组执⾏前触发 #tearDown线程组:在普通线程组执⾏后触发 线程组属性配置详情完全⼀致 使⽤策略建议 #Setup 线程组 – 压测执⾏准备阶段,准 ...
- mqtt网关服务器连接阿里云关联物模型
mqtt网关服务器连接阿里云关联物模型 卓岚专门为工业环境设计的RS485设备数据采集器/物联网网关,兼具串口服务器.Modbus网关.MQTT网关.RS485转JSON等多种功能于一体. 可以连接阿 ...
- 初探webpack之编写plugin
初探webpack之编写plugin webpack通过plugin机制让其使用更加灵活,以适应各种应用场景,当然也大大增加了webpack的复杂性,在webpack运行的生命周期中会广播出许多事件, ...
- WebXml文件与SpringMVC的联系
WebXml文件与SpringMVC的联系 无论采用何种框架来进行Java Web的开发,只要是Web项目必须在WEB-INF下有web.xml,这是java规范. 当然,我们最早接触到Java We ...
- mysql中一半会选择什么样的字段为索引?(含索引创建删除查看公式)
一.数据量庞大的数据做索引 二.该字段经常出现在where的后面,以条件形式存在,经常被用户搜索的字段 三.很少被增删改的字段,因为增删改后,索引会重新排序 索引的创建 create index 索引 ...
- Java基础之(十二):数组
数组 数组概述 定义 数组是相同类型数据的有序集合. 数组描述的是相同类型的若干数据,按照一定的先后次序排列组合而成. 其中,每一个数据称作一个数组元素,每个数组元素可以通过一个下标来访问它们. 数组 ...
- 题解 [AGC017C] Snuke and Spells
题目传送门 Description 有 \(n\) 个球排在一起,每个球有颜色 \(a_i\),若当前有 \(k\) 个球,则会将所有 \(a_i=k\) 的球删掉.有 \(m\) 次查询,每次将 \ ...
- 题解 GRE Words Revenge
题目传送门 题目大意 给出 \(m\) 次操作,分别为以下两种操作: 学习一个单词 给出一个段落,查询里面有多少个学过的单词.注意,如果学习过 \(\text{ab,bc}\) ,当前查询段落为 \( ...
- Redis 基础数据类型重温
有一天你突然收到一条线上告警:Redis 内存使用率 85%.你吓坏了赶紧先进行扩容然后再去分析 big key.等你进行完这一系列操作之后老板叫你去复盘,期间你们聊到了业务的数据存储在 Redis ...