CSS 属性的继承

CSS中有些属性是可继承的，何为属性的继承？

一个元素如果没有设置某属性的值，就会跟随父元素的值
当然，一个元素如果有设置某属性的值，就使用自己设置的值

比如 color、font-size 等属性都是可以继承的

究竟哪些属性可以继承，不用死记硬背，用多了自然熟练。而且可以随时查阅官方文档找到答案

不能继承的属性，一般可以使用 inherit 强制继承

浏览器的开发者工具也会标识出哪些样式是继承过来的

继承的注意点

CSS 属性继承的是计算值，并不是当初编写属性时的指定值（字面值）

CSS 属性的层叠

CSS 允许多个相同名字的 CSS 属性层叠同在一个元素上

层叠后的结果是：只有一个 CSS 属性会生效
浏览器的开发者工具非常清晰地显示了哪个 CSS 属性会生效
哪个 CSS 属性会生效，取决于 CSS 属性所处环境的优先级高低

CSS 属性的优先级

按照经验，为了方便比较 CSS 属性的优先级，可以给 CSS 属性所处的环境定义一个权重

!important：10000
内联样式：1000
id选择器：100
类选择器、属性选择器、伪类：10
元素选择器、伪元素：1
通配符：0

比较优先级的严谨方法：

从权值最大的开始比较每一种权值的数量多少，数量多的则优先级高，即可结束比较
如果数量相同，比较下一个较小的权值，以此类推
如果所有权值比较完毕后，发现数量都相同，就采取“就近原则”

总结：选择器的针对性越强，优先级越高

!important > 内联样式 > id > class、属性、伪类 > 标签（元素）、伪元素 > 通用（*）

优先级细节

以下 2 个选择器效果一致：

#test 和 [id="test"] 看起来好像一样，其实本质不一样

#test 优先级比 [id="test"] 高

思考：为什么会出现以下结果

第一个是因为 a 标签有默认的样式，因此无法从 div 继承；
第二个是因为 p 无法包含 div，如果是 div 包含 p 则可以

CSS 属性使用总结

为何有时候编写的 CSS 属性不好使，有可能是因为：

选择器的优先级太低
选择器没选中对应的元素
CSS 属性的使用形式不对
元素不支持此 CSS 属性，比如 span 默认是不支持 width 和 height 的
浏览器不支持此 CSS 属性，比如旧版本的浏览器不支持 CSS3 的某些属性
被同类型的 CSS 属性覆盖，比如 font 覆盖 font-size

建议：充分利用浏览器的开发者工具进行调试（增加、修改样式）、查错

【重识 HTML + CSS】CSS 特性相关推荐

【重识 HTML + CSS】知识点目录
重识 HTML + CSS 前言基本 HTML 标签基本 CSS 属性 CSS 选择器 CSS 特性 HTML 列表.表格.表单 HTML 元素类型盒子模型相关知识点 Photoshop 简单使 ...
【重识 HTML + CSS】浮动
浮动 CSS 属性 - float 浮动的规则浮动的应用浮动存在的问题:高度坍塌清浮动的常见方法 CSS 属性 - clear 各种定位方案对比博文集合:[重识 HTML + CSS]知识点目 ...
【重识 HTML + CSS】定位
定位标准流 (Normal Flow) CSS 属性 - position relative - 相对定位 static - 静态定位 fixed - 固定定位画布 (Canvas) 和视口 (V ...
【重识 HTML + CSS】项目实战
项目实战常见项目目录 CSS Reset CSS 编码规范浏览器私有前缀 CSS 知识补充 CSS 属性 - white-space CSS 属性 - text-overflow image-se ...
【重识 HTML + CSS】官方文档的阅读
官方文档 CSS 属性的描述 CSS 属性的取值组合 (combinators) 出现次数 (multipliers) 类型 (types) < number >.< intege ...
【重识 HTML + CSS】背景相关知识点
background 背景 CSS 属性 - 背景 CSS 属性 - background-image 设置元素背景图片 CSS 属性 - background-repeat 设置背景图片是否平铺 C ...
【重识 HTML + CSS】Photoshop 简单使用
Photoshop Photoshop 简介常用功能常用面板常用设置单位设置标尺设置颜色模式设置移动工具设置增加画布大小常用快捷键矩形选框工具 (D) 裁剪工具.切片工具 (C) ...
【重识 HTML + CSS】盒子模型相关知识点
盒子模型盒子模型 (Box Model) 宽度.高度相关 CSS 属性 - width.height 内边距相关 CSS 属性 - padding 外边距相关 CSS 属性 - margin [常见 ...
【重识 HTML + CSS】元素类型、display、visibility、overflow
元素类型元素类型块级.行内级元素替换.非替换元素元素的分类总结 CSS 属性 - display inline-block 练习 - 邮箱显示与选择练习 - 分页跳转栏 display 的其 ...

【重识 HTML + CSS】CSS 特性

CSS 特性