转自：http://blog.csdn.net/wl110231/article/details/7642652
大家都知道CSS的全称叫做“层叠样式表”，但估计很多人都不知道“层叠”二字的含义。其实，“层叠”指的就是样式的覆盖，当一个元素被运用上多种样式，并且出现重名的样式属性时，浏览器必须从中选择一个属性值，这个过程就叫“层叠”。样式覆盖（这种叫法更大众化些）遵循一定的规则，之前我对这个规则一直似懂非懂的，直到这几天看了”CSS: The Missing Manual”，才豁然开朗。下面是我的一些学习笔记。
首先需要明确的是，很多情况都会导致一个元素被运用上多种样式，样式覆盖的规则也需要根据不同的情况来定，具体规则如下。
规则一：由于继承而发生样式冲突时，最近祖先获胜。
CSS的继承机制使得元素可以从包含它的祖先元素中继承样式，考虑下面这种情况：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<html>
<head>
<title>rule 1</title>
<style>
body {color:black;}p {color:blue;}</style>
</head>
<body>
<p>welcome to <strong>gaodayue的网络日志</strong></p>
</body>
</html>
|
strong分别从body和p中继承了color属性，但是由于p在继承树上离strong更近，因此strong中的文字最终继承p的蓝色。
规则二：继承的样式和直接指定的样式冲突时，直接指定的样式获胜。
在上面的例子中，假如还指定了strong元素的样式，如：
|
1
|
strong {color:red;}
|
那么根据规则二，strong中的文字最终显示为红色。
规则三：直接指定的样式发生冲突时，样式权值高者获胜。
样式的权值取决于样式的选择器，权值定义如下表。
| 标签选择器 | 1 |
| 类选择器 | 10 |
| ID选择器 | 100 |
| 内联样式 | 1000 |
| 伪元素(:first-child等) | 1 |
| 伪类(:link等) | 10 |
可以看到，内联样式的权值>>ID选择器>>类选择器>>标签选择器，除此以外，后代选择器的权值为每项权值之和，比如”#nav .current a”的权值为100 + 10 + 1 = 111。
规则四：样式权值相同时，后者获胜。
考虑下面这种情况
|
1
|
<p class="byline">Written by <a class="email" href="mailto:jean@cosmofarmer. com">Jean Graine de Pomme</a></p>
|
|
1
2
|
.byline a {color:red;}
p .email {color:blue;}
|
“.byline a”与”p .email”都直接指定了上面的a元素，且权值都为11，根据规则四，最终显示蓝色。
由于样式表可以是外部的，也可以是内部的，规则四提醒我们要注意外部样式表引入的顺序（及<link>元素的顺序），以及外部样式表与内部样式表的出现位置。一般来说，内部样式表出现在所有外部样式表的引入之后，一般是在</head>之前。
规则五：!important的样式属性不被覆盖。
!important可以看做是万不得已的时候，打破上述四个规则的”金手指”。如果你一定要采用某个样式属性，而不让它被覆盖的，可以在属性值后加上!important，以规则四的例子为例，”.byline a {color:red !important;}”可以强行使链接显示红色。大多数情况下都可以通过其他方式来控制样式的覆盖，不能滥用!important。
相关推荐
样式覆盖（这种叫法更大众化些）遵循一定的规则，之前我对这个规则一直似懂非懂的，直到这几天看了”CSS: The Missing Manual”，才豁然开朗。下面是我的一些学习笔记。 首先需要明确的是，很多情况都会导致一个元素...
样式规则： CSS样式文档由一系列样式规则组成。每条规则由一个选择器和一组声明构成。选择器用于选择要应用样式的HTML元素，而声明则包含一个或多个属性-值对，指定了元素应该如何呈现。 选择器： 选择器是用于标识...
对于同一个标签元素设置属性，满足这样一个规则：元素单独设置的样式>class命名样式>标签样式。样式override父级别的。 复制代码代码如下: <style type=”text/css”> #txt{ background-color:Red} .txt{ ...
通过将HTML文档与CSS样式分离，开发人员可以更好地管理、修改和维护网页的外观。以下是关于CSS笔记的详细描述： 样式规则： CSS通过一系列样式规则来定义元素的外观和布局。每条规则由一个选择器和一个声明块组成。...
6.6.2 使用样式覆盖进行简化 6.7 园角样式设计 6.7.1 圆角表格 6.7.2 圆角矩形 6.8 滑动门技术 6.9 小提示窗口 6.10 图像地图 6.11 垂直居中 6.12 折叠标签 6.13 CSS数据图表 6.13.1 初级样式(进度条) 6.13.2 复合...
不同浏览器对于相同元素的默认样式...因此，我们在生成CSS样式规则的时候，一个必做的步骤就是重设浏览器的默认样式，也就是覆盖掉浏览器的默认样式。和使用 * {padding:0;margin:0}有所不同，并不是所有的元素都存在pa
3.CSS样式特征 1.继承性 必须是父子（有层叠嵌套的关系）结构 大部分的css效果是可以 2.优先级 1.浏览器默认样式 2.内部样式和外部样式（就近原则） 3.内联样式 4.!important; 绝对优先使用（） 格式 p{ ...
引用 当页面上已有CSS样式时，您要防止这些样式层叠到页面的某些部分。 这不是在开发自己的网站时要使用的样式表（为此，请尝试或 。 将内容（例如，小部件或联合新闻）分发到第三方网站时，样式表可能会很有用。 ...
这里我们只求CSS规则的覆盖率，所以访问 querySelectorAll().length 即可。通过排序就可看出各个CSS使用情况。代码很简单。 代码如下:var usage = [];var sheets = document.styleSheets; for(var i = she
对元素，应用sorted rules中的属性（层叠过程，高优先级的在上面，覆盖了下面低优先级的属性) 最后渲染，考虑继承值（也是个层叠过程)和默认值, 再做属性值转换。 原则就是 general —> special 查找阶段 遍历所有...
在CSS中，会根据选择器的特殊性来决定所定义的样式规则的次序，具有更特殊选择器的规则优先于具有一般选择器的规则，如果两个规则的特殊性相同，那么后定义的规则优先。 那么，又怎么来计算选择器的特殊性呢？下面...
@charset这个规则定义了浏览器使用的字符集，如果样式表包含非ASCII characters (e.g:UTF-8)。注意，被放在HTTP头部的字符集将会覆盖@charset规则 复制代码代码如下: @charset “UTF-8”; @import这个规则指
at-rule是一个声明，为CSS提供执行或怎么表现的指令。每个声明以@开头,后紧跟一个可用的关键字，这个关键字充当一个标识符，用于表示CSS该做什么。...这个规则指示请求样式表，在这一行，如果内容是正
important去覆盖原有高优先级的样式。按照常理来说，越是灵活的东西，需要做的工作就会更多。所以想当然的认为像!important这样灵活、方便的规则如果用得多的话肯定会对性能有所影响。基于这种考虑，本来想把所有的...
介绍CSS中，单个选择器，以及复合选择器的权重计算规则，比如： .box #mydiv ul li.txt。通过计算选择器的权重，区别其优先级，判 断最终样式的覆盖效果。
开发此插件的目的是使用CSS3转换规则来滑动隐藏框的内容。例子实际使用中看到！选项和参数它使用以下参数，可以根据需要将其覆盖。 accordion ：如果折叠必须表现得像手风琴一样，则设置此变量（默认值为'false'，...
更改通常会涉及随机规则、特殊性战争和臃肿的样式表。 为了控制伪造 css 规则和过度重复的猖獗传播，整个设计已使用重写。 css 输出和其他部署前任务是使用创建的。 内容 源文件 开发源文件。 主要是模板页面和 ...
因此，如果您依赖属性覆盖，它会弄乱您的样式。 这个工具只能在你掌握你的 css 文件时使用，使用正确的方法 (BEM)，具有低特异性。安装npm install media-query-extractor # for module exportnpm install -g media...