CSS 继承和优先级
CSS继承性
CSS属性继承:外层元素的样式,会被内层元素进行继承。
多个外层元素的样式,最终都会“叠加”到内层元素上。
什么样的CSS属性能被继承呢?
CSS文本属性都会被继承的:
color、 font-size、font-family、font-style、 font-weight
text-align、text-decoration、text-indent、letter-spacing、line-height
提示:<body>中的CSS属性,会被所有的子元素继承。
CSS优先级
(1)单个选择器的优先级
行内样式 > id选择器 > class选择器 > 标签选择器

(2)多个选择器的优先级
多个选择器的优先级,一般情况下,指向越准确,优先级越高。
特殊情况下,我们需要假设一些值:
标签选择器 优先级为1
类选择器 优先级为10
Id选择器 优先级为100
行内样式 优先级为1000
计算以下优先级:
.news h1{color:red;} 优先级:10 + 1 = 11
.title{color:blue;} 优先级:10
div.news h1{color:red;} 优先级:1 + 10 + 1 = 12
h1.title{color:blue;} 优先级:1 + 10 = 11
CSS 继承和优先级的更多相关文章
- CSS继承总结
CSS的一个重要特征就是继承,它是依赖于祖先-后代的关系的.继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代. CSS可以继承的属性有: 1.文字相关:font-famil ...
- CSS的继承与优先级
CSS样式继承性 body,div,p{} html文档可以上图的种种节点树的形式表示,css层叠样式表中的各元素也有这种对应关系 <body>是文档中最大的根节点,body中的所有元素都 ...
- CSS三大特性(继承、优先级、层叠)之个人见解
首先声明一下CSS三大特性——继承.优先级和层叠.继承即子类元素继承父类的样式,比如font-size,font-weight等f开头的css样式以及text-align,text-indent等t开 ...
- CSS选择器、优先级与匹配原理(转)
CSS选择器.优先级与匹配原理 导航 为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先 ...
- css权重及优先级问题
css权重及优先级问题 几个值的对比 初始值 指定值 计算值 应用值 CSS属性的 指定值 (specified value)会通过下面3种途径取得: 在当前文档的样式表中给这个属性赋的值,会被优先使 ...
- [程序猿入行必备]CSS样式之优先级
专业玩家请移步:http://www.w3.org/TR/CSS2/cascade.html 使用CSS控制页面样式时,常常出现设定的样式被"覆盖",不能生效的情况. 浏览器是根据 ...
- CSS 选择器及其优先级
CSS 的选择器有很多类型,我们将常用的这些列表如下: 一.CSS 选择器的类别 1. 基本选择器 基本选择器 解释 备注 * 通用选择器,匹配所有元素 CSS2 E 元素选择器,匹配类型为 E 的所 ...
- CSS样式的优先级
1.相同权值情况下,CSS样式的优先级总结来说,就是--就近原则(离被设置元素越近优先级别越高): 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中). 2.权 ...
- css !important用法以及CSS样式使用优先级判断
之前一直看到很多css中都有!important这个样式,一直不知道有什么作用的,今天在网上详细了解了一下,看了别人的博客,顺便转载收藏一下 css !important用法CSS样式使用优先级判断 ...
随机推荐
- Java HashSet和ArrayList的查找Contains()时间复杂度
今天在刷leetCode时,碰到了一个题是这样的. 给定一个整数数组,判断是否存在重复元素. 如果任何值在数组中出现至少两次,函数返回 true.如果数组中每个元素都不相同,则返回 false. 看到 ...
- curl 命令帮助及使用
目录 一.简介 二.curl 帮助文档 三.curl 的使用 前言 刚接触 curl 就发现它的非常强大.奈何帮助文档全是英文,看起来贼费劲.无奈只能硬着头皮用自己蹩脚的英语和翻译软件硬生生的翻译了一 ...
- Struts功能详解——ActionForm
ActionForm ActionForm用于封装用户的请求参数,而请求参数是通过JSP页面的表单域传递过来的.因此应保证ActionForm的参数,与表单域的名字相同. ActionForm ...
- Python sorted list的实现
Python sorted list的实现 具体思路是用二分保list有序+插入 class SortedList(list): K = -1 def __init__(self, K=-1): li ...
- NPAPI插件开发新手容易遇到的问题
在网上找了一个npdemo的例子,编译了一下在FireFox运行正常,在Chrome下就是不行,也没任何提示. 折腾了好久,最后发现是rc文件 支持语言编码问题 NPAPI插件开发详细记录:用VS20 ...
- 用注册表创建无法删除的IE快捷方式
代码如下: Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE/SOFTWARE/Classes/CLSID/{98745625-1234 ...
- JVM内核-原理、诊断与优化学习笔记(十):Class文件结构
文章目录 语言无关性 文件结构 魔数 版本 常量池 CONSTANT_Utf8 CONSTANT_Integer CONSTANT_String CONSTANT_NameAndType CONSTA ...
- scrollReveal.js导致页面加载完之后页面中点击事件添加的css参数失效了(我的Hexo next博客引发的问题)
文章目录 时间 背景 问题解决 个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 时间 2019 ...
- 随笔-ansible-1
系统下所有的操作,从运维操作角度划分为两类: 1.文件传输 2.命令执行 系统下所有的操作,从自动化工作类型角度划分为: 1.应用部署 2.配置管理 3.任务流编排 使用root生成默认的秘钥对: # ...
- sql 循环执行游标
---定义开始和结束时间 declare @st_dt datetime declare @en_dt datetime ---时间赋值 ' ' ---定义中间变量 declare @dt datet ...