CSS:Getting Started:Cascading and inheritance

From MDC

[编辑] 资料: 层叠和继承

一个元素最终样式可以在不同的地方通过复合相互作用等方式指定。 这种复合的相互作用令CSS功能强大，但同时也带来了混乱且难以调试。

一个层叠样式信息主要有三种来源。 它们是:

• 浏览器显示标记语言的缺省样式
• 阅读文档的用户指定样式
• 文档作者指定的样式链接

用户的样式修改了浏览器的缺省样式。 文档作者的样式又改变了某些样式。 在本指南中，示例文档的作者就是你，你只能控制作者样式。

Example

你正在阅读的这往篇文档，一些风格来自正在使用的浏览器的缺省HTML显示风格，一些风格可能来自你使用的浏览器选项或浏览器配置文件中的userContent.css文件。还有一些风格来自链接到到这篇文档的wiki服务器。

使用浏览器中打开我们的示例文档，STRONG元素比其它文本更粗重。这来自浏览器的缺省HTML显示风格。

STRONG元素是红色的。这个样式来自示例文档使用的示例样式表。

STRONG元素会继承P元素的样式，因为它是P元素的子元素。同理，P元素也会继承大部分BODY元素的样式。

对于层叠中的样式，作者样式表比读者样式表和浏览器缺省样式具有优先权。

对于继承样式，子节点样式优先权高于它继承的父节点样式。

优先级的应用远不止上面这一点点，在本教程的后面的页面将会解释更多关于优先级的内容。

更多资料

CSS同时为读者提供覆盖作者样式的方法，就是使用!important关键字。 这意味着即使是文档的作者，也无法准确预测读者看到的内容究竟是什么样子。如果想知道层叠和继承的更多细节，访问 Assigning property values, Cascading, and Inheritance CSS规范里的 赋属性值，层叠和继承

[编辑] 实践：使用继承

编辑示例CSS文件。

将下列内容复制并粘贴到CSS文件中。 新添加的行写在原来样式的上面或下面都无关紧要。 但是，将它添加到CSS文件的头部更符合逻辑，因为在我们的文档中，P元素是STRONG元素的父元素：

p {color: blue; text-decoration: underline;}

现在，刷新浏览器中的示例文档，看看有什么效果。 段落中所有文本都加上了下划线，包括首字母。 STRONG元素从P元素继承了下划线样式。

但是 STRONG 元素仍然是红色的。因为红色是它本身的样式，所以它的优先级在父元素 P 之上。

之前 Cascading Style Sheets

之后 Cascading Style Sheets

挑战

改变示例样式表，仅让红色的字母带下划线: Cascading Style Sheets

[编辑] 接下来的内容是什么?

如果你感到本页内容难以理解，或有其它注解，请提交到讨论 页。

示例样式表中为标签P和STRONG指定的样式，已经改变整个文档所有相应元素的样式。 在下一个页面，我们将学习如何更有选择性的指定样式： 选择符