最近在恶补css样式表的基础知识。上次研究了css样式表之冲突问题详解 。这次是对 css 继承 特性的学习。

什么是css 继承？
要想了解css样式表的继承，我们先从文档树（HTML DOM）开始。文档树由HTML元素组成。

文档树和家族树类似，也有祖先、后代、父亲、孩子和兄弟^_^。这很容易理解吧，笔者在这里就不一一赘述了。希望深入了解的朋友请google之。

那么CSS样式表继承指的是，特定的CSS属性向下传递到子孙元素。

下面举个例子，有如下html代码片段：

<p>
CSS样式表<em>继承特性</em>的演示代码
</p>

需要注意的是em是包含在p之内的。

当我们指定p的css样式时，看看em会有什么变化呢？

<style>
p { color:red; }
</style>

在浏览器中p 和 em 字体同时变红。我们并没有指定em的样式，但em继承了它的父亲元素p的样式特性。

也许各位看了以后觉得这是理所当然的，根本不值一哂^_^。其实，这就是继承。在不知不觉中影响这我们的代码（想像一下如果没有继承特性，你就需要为每一个元素定义颜色属性，这是多么痛苦的一件事情！！！=_=!）。

当然也不是所有的css属性都会被子类继承，例如border属性。继续利用上面的一段代码。我们为p元素添加border属性

p { border: 1px solid red; }

还好，p的border属性没有被em继承，否则是不是怪怪的呢？！^_^

那么，哪些属性是可以继承的呢？css样式表属性可以继承的有如下：

azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing

吓？！这么多？！怎么记得住呢？别急，我们来理一理这些属性。

文本相关属性：

azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing

列表相关属性：

azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing

还有一个属性比较重要，color属性。

值得一说的是font-size。很显然font-size是可以被继承的。但是它的方式有一些特别。Font-size的子类继承的不是实际值，而是计算后的值。下面解释下为什么font-size会这么特别呢？

看一个例子：

<p>
字体大小属性<em>继承特性</em>的演示代码
</p>

为p定义字体大小为默认字体的80％。

p { font-size:80%}

如果font-size继承的是相对值，那么结果会怎么样呢？依照这样的逻辑，em的font-size为80％X80％=64%，网页看起来应该是这样的。

但，实际情况却不是如此。em内的文字并没有改变大小，而是和p保持一致。

下面举三个例子，让各位有个直观的认识

p { font-size:14px;}

由于浏览器默认字体大小是16px，而p定义了字体14px，所以em继承了p的字体大小属性，也是14px；

元素 值 计算后的值
默认字体大小 约16像素  
<body> 未指定 约16px
<p> 14px 14px
<em> 未指定 继承值=14px

p { font-size:85%;}

浏览棋默认字体大小16px,而p定义了字体大小(16px X 85% = 13.6px). 13.6px这个值将被子元素em继承。

元素 值 计算后的值
默认字体大小 约16像素  
<body> 未指定 约16px
<p> 85% 16px X 85% = 13.6px
<em> 未指定 继承值=13.6px

p { font-size:0.85em;}

浏览棋默认字体大小16px,而p定义了字体大小(16px X 0.85em = 13.6px). 13.6px这个值将被子元素em继承。

元素 值 计算后的值
默认字体大小 约16像素  
<body> 未指定 约16px
<p> 0.85em 16px X 0.85em= 13.6px
<em> 未指定 继承值=13.6px

上面的例子都比较简答，再来个复杂的

body { font-size: 85%; }
h1 { font-size: 200%; }
h2 { font-size: 150%; }

浏览棋默认字体大小16px,而body定义了字体大小(16px X 85% = 13.6px). 如果子元素没有指定字体大小13.6px这个值将被子元素继承。

元素 值 计算后的值
默认字体大小 约16像素  
<body> 85% 16px X 85% = 13.6px
<h1> 200% 继承值＝13.6px X 200%= 27.2px
<h2> 150％ 继承值＝13.6px X 150%= 20.4px
<p> 未指定 继承值=13.6px
<em> 未指定 继承值=13.6px

说到这里，CSS样式表的继承基本上讲完了。在实践中，还有一个特性值需要解释一下，这和继承的应用也是息息相关的。

样式表中的特性值描述了不同规则的相对权重，它的基本规则是：

◆统计选择符中的ID属性个数。

◆统计选择符中的CLASS属性个数。

◆统计选择符中的HTML标记名格式。

最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数。(注意，你需要将数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。

以下是一个按特性分类的选择符的列表：

H1{color:blue;}　    特性值为：1
PEM{color:purple;} 特性值为：2
.apple{red;}　  特性值为：10
P.bright{color:yellow;}    特性值为：11
P.brightEM.dark{color:brown;}　  特性值为：22
#id316{color:yellow}　   特性值为：100

从上表我们可以看出#id316具有更高的特殊性，因而它有更高的权重。当有多个规则都能应用于同一个元素时，权重越高的样式将被优先采用。而继承属性的特性值为0；也就是说，任何一条与css继承值冲突的属性值都会覆盖继承的属性值！！！

这点是需要各位注意的，Enjoy it！！

CSS样式表继承详解的更多相关文章

  1. css样式之background详解

    background用法详解: 1.background-color 属性设置元素的背景颜色 可能的值 color_name            规定颜色值为颜色名称的背景颜色(比如 red) he ...

  2. css样式之background详解（格子效果）

    background用法详解: 1.background-color 属性设置元素的背景颜色 可能的值 color_name            规定颜色值为颜色名称的背景颜色(比如 red) he ...

  3. Qt样式表——选择器详解（父子关系）

    在上一节中,小豆君给大家介绍了样式表的基本概念和大致用法.今天我们来详细了解下样式表中选择器的用法. 所谓选择器,就是指定你所设置的样式对哪个或哪些控件起作用. 到目前为止,Qt样式表支持CSS2中定 ...

  4. CSS样式----CSS样式表的继承性和层叠性（图文详解）

    本文最初于2017-07-29发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重点 CSS的继承性 CSS的层叠性 计算权重 ...

  5. CSS标签类型和样式表继承与优先级

    标签类型 块级标签 什么是块级标签:在html中<div>. <p>.h1~h6.<form>.<ul> 和 <li>就是块级元素 块级标签 ...

  6. CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  7. WEB入门 四 CSS样式表深入

    学习内容 Ø        CSS选择器深入学习 Ø        CSS继承 Ø        CSS文本效果 Ø        CSS图片效果 能力目标 Ø        掌握CSS选择器的组合声 ...

  8. 「万字图文」史上最姨母级Java继承详解

    摘要:继承是面向对象软件技术中的一个概念.它使得复用以前的代码非常容易,能够大大缩短开发周期,降低开发费用. 本文分享自华为云社区<「万字图文」史上最姨母级Java继承详解丨[奔跑吧!JAVA] ...

  9. 深度理解CSS样式表，内有彩蛋....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 【BZOJ-2521】最小生成树 最小割

    2521: [Shoi2010]最小生成树 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 415  Solved: 242[Submit][Statu ...

  2. 【BZOJ-4514】数字配对 最大费用最大流 + 质因数分解 + 二分图 + 贪心 + 线性筛

    4514: [Sdoi2016]数字配对 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 726  Solved: 309[Submit][Status ...

  3. POJ3468 A Simple Problem with Integers

    Description 给出了一个序列,你需要处理如下两种询问. "C abc"表示给[a, b]区间中的值全部增加c (-10000 ≤ c ≤ 10000). "Q  ...

  4. osquery An Operating System Instrumentation Framewor

    catalog . Getting Started . install guide for OS X and Linux . Features Overview . Logging . query e ...

  5. 获取exe目录

    System.IO.Directory.GetCurrentDirectory()这个方法,会随着你的当前系统路径的改变而改变.比如你打开一个openFileDialog那么,再次获得路径就不对了.s ...

  6. HDU 1811 Rank of Tetris（拓扑排序+并查集）

    题目链接: 传送门 Rank of Tetris Time Limit: 1000MS     Memory Limit: 32768 K Description 自从Lele开发了Rating系统, ...

  7. CF 321B Kefa and Company（贪心）

    题目链接: 传送门 Kefa and Company time limit per test:2 second     memory limit per test:256 megabytes Desc ...

  8. CSS3动画（性能篇）

    写在前面 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量.功耗与流畅度. 在PC时代我们更多的是考虑体验上的流畅度,而在Mobile端本身丰富的场景下,需要额 ...

  9. 高性能JavaScript笔记二（算法和流程控制、快速响应用户界面、Ajax）

    循环 在javaScript中的四种循环中(for.for-in.while.do-while),只有for-in循环比其它几种明显要慢,另外三种速度区别不大 有一点需要注意的是,javascript ...

  10. Visual Studio 当前上下文中不存在名称“ConfigurationManager”

    Visual Studio调试出现错误:当前上下文中不存在名称“ConfigurationManager” 解决方法: 1.System.Configuration引用这个dll参考:http://k ...