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样式使用优先级判断 ...
随机推荐
- Python 3.3 IDLE 删除键出现空格卡顿
Python 3.3 IDLE 删除文字时会出现"□",造成删除键卡顿 原因:使用的是百度输入法,由于输入法的编码方式不同,对IDLE造成了不兼容 换成了搜狗输入法问题解决.... ...
- idea 在新建一个class的时候可以选择继承的父类
1.把光标放在父类名称上按alt+enter可以生成子类 2. 选中implement abstract class
- 微信小程序-云开发
云开发 初始化 wx.cloud.init({ env: 'test-x1dzi' }) 云数据库 数据类型 String,Number,Boolean,Array,Object,Date,GeoPo ...
- jQuery - 事件相关
<script> $(function() { // 事件绑定 // 第一种方式 $("#btn").click(function() { alert("1 ...
- 获取Delphi焦点所在的控件及通过控件名称访问控件
方法一: Var I: Integer; Begin For I := To ComponentCount - Do //获取组件数量 Begin If Components[I] Is TWinCo ...
- delphi Copy函数 和 Pos函数
copy(a,b,c); a:就是copy源,就是一个字符串,表示你将要从a里copy一些东西, b:从a中的第b位开始copy(包含第1位), c:copy从第b位开始后的c个字符, 例如: m:= ...
- delphi 键盘常用参数(PC端和手机端 安卓/IOS)
常数名称(红色手机端) 十六进制值 十进制值 对应按键(手机端) Delphi编程表示(字符串型)_tzlin注 0 0 大键盘Delete键 #0 VK_LBUTTON 1 1 鼠标的左键 #1 V ...
- Kafka命令行操作
Kafka命令行操作 1)查看当前服务器中的所有topic [bingo@hadoop101 kafka]$ bin/kafka-topics.sh --list --zookeeper hadoop ...
- NX二次开发-UFUN获取工程图视图边界线是否显示UF_DRAW_ask_border_display
#include <uf.h> #include <uf_draw.h> #include <uf_ui.h> UF_initialize(); logical b ...
- Day15:Python 【模块】及__name__:
什么是模块: 在Python中,随着这代码的撰写,代码越来越长,所以产生了,模块这个概念,模块是什么?模块就是一个.py文件,在撰写代码时,我们把不同的功能的代码封装到一个.py文件里,用得时候导入 ...