大家都知道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”，才豁然开朗。下面是我的一些学习笔记。 首先需要明确的是，很多情况都会导致一个元素...
标题中的“birt公用CSS样式”指的是为BIRT报表设计的一组通用的CSS样式。这些样式通常是为了统一和简化报表设计过程，确保不同报表之间具有一致性和专业性。开发者可以复用这些样式，避免重复编写相同的代码，提高...
SharePoint，尤其是其2007版本（也称为MOSS 2007，即Microsoft Office SharePoint Server 2007），提供了丰富的CSS样式，使得开发者和管理员能够根据需求调整站点的外观和布局。 标题"SharePoint的CSS样式"指出了...
**CSS样式表详解** CSS（Cascading Style Sheets）是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它的主要作用是增强对网页内容的控制，使得内容和表现分离，提高了网页设计的...
在描述中，提到了“很好的css样式列表”和“自己经常使用的”，这暗示了这个压缩包可能包含了一组经过实践检验、效果出色的CSS样式集。对于开发者来说，拥有这样一套资源可以极大地提高工作效率，因为无需从零开始...
CSS 样式应用优先级是指在CSS样式规则应用时的顺序和优先级。该优先级规则决定了哪些样式规则将被应用于HTML元素。下面是CSS样式应用优先级的详细解释： 1. 重要声明（!important） 重要声明是CSS样式规则中最高的...
**CSS样式表中文手册合集**是一份专为网页设计师准备的重要参考资料，它涵盖了CSS（Cascading Style Sheets）的全面知识，旨在帮助用户更好地理解和应用CSS进行网页设计。这份合集由**苏昱（苏沈小雨）**编译整理，...
"总结的超级有用的基础CSS样式类"是一份宝贵的资源，涵盖了CSS中最常用和实用的样式类。这些样式类可以帮助开发者快速、有效地美化和布局页面，提高开发效率。下面，我们将深入探讨其中的关键知识点。 1. **选择器*...
}</style><div id="myId1">这是使用ID样式的唯一区块</div>CSS选择器的优先级在CSS中，选择器的优先级决定了当多个规则应用于同一元素时，哪个规则的样式会被应用。优先级从高到低排序如下： 1. 内联样式 (如 `...
然而，对于中文用户来说，英文版的Dreamweaver CS4在处理CSS时可能会造成一定的理解和操作困难，这就是“Dreamweaver CS4 CSS样式表汉化补丁”存在的意义。 这个汉化补丁的出现是为了提供一个全面汉化的CSS编辑环境...
有时候，样式不一致的原因是.NET环境中某些元素的默认样式覆盖了自定义CSS。通过调整CSS选择器的优先级，可以避免这种情况发生。 ```css /* 提高优先级 */ #some-element { color: red !important; } ``` ##### ...
综上所述，"course_css样式_"的课程将全面覆盖CSS的各个方面，从基础到高级，从理论到实践，帮助学习者建立起坚实的CSS基础，掌握创建美观、响应式网页的技巧，从而在网页设计领域游刃有余。通过学习和实践course....
本文将深入探讨如何学习和运用CSS样式表。 首先，我们可以将CSS样式表分为四种主要的使用方式： 1. **链入外部样式表**：这是最常见的方式，通过`<link>`标签在HTML文件的`<head>`部分引用一个`.css`文件。这样做...
在CSS样式参考手册中，我们可以找到关于选择器、属性、值以及各种CSS规则的详细解释，帮助开发者实现精确的页面布局和美化。 首先，我们来了解一下CSS的基础知识。CSS由一系列选择器和声明组成，选择器用于定位HTML...
4. **层叠**：CSS的“层叠”特性意味着当一个元素被多个样式覆盖时，会根据特定的层叠顺序决定最终应用的样式。 5. **盒模型**：CSS盒模型是理解元素尺寸的关键，它包括元素的内容区域、内边距（padding）、边框...
样式规则： CSS样式文档由一系列样式规则组成。每条规则由一个选择器和一组声明构成。选择器用于选择要应用样式的HTML元素，而声明则包含一个或多个属性-值对，指定了元素应该如何呈现。 选择器： 选择器是用于标识...
它们将CSS样式直接写在JavaScript中，结合了JS的动态性和CSS的样式能力，提供了更强大的样式管理方案，但同时也需要权衡性能和代码可读性。 7. **媒体查询与响应式设计** 使用`@media`规则可以为不同设备或屏幕...
标题中的“css样式表兼容总结,兼容火狐,ie6,ie7,FF”指的是在网页设计中，CSS样式表需要处理不同浏览器之间的兼容性问题，特别是老版本的Internet Explorer（IE6和IE7）以及Firefox。描述中的“css样式表火狐,ie6,ie...
了解这些基本原理后，你可以更精确地控制CSS样式，避免不必要的覆盖和冲突。在开发过程中，合理使用选择器权重可以帮助优化代码结构，提高可维护性。记住，尽量避免过度依赖`!important`，因为它会降低代码的可读性...