CSS 的组成

你可能会遇到两个选择器选择同一个 HTML 元素的情况。考虑下面的样式表，有一个 p 选择器，将段落文本设置为蓝色。然而，也有一个类将所选元素的文本设置为红色。

css

假如在我们的 HTML 文档中，我们有一个带有 special 类的段落。这两条规则都适用，那么到底哪种选择器会占优势？我们的段落会变成蓝色还是红色？

html

CSS 语言有一些规则来控制在发生冲突的情况下哪个选择器更强大。这些规则被称为层叠（cascade）和优先级（specificity）。在下面的代码块中，我们为 p 选择器定义了两条规则，但段落文本将是蓝色的。这是因为将段落文本设置为蓝色的声明在样式表的后面出现。后面的样式会替换样式表中较早出现的冲突样式。这就是层叠规则。

css

然而，在我们前面的例子中，类选择器和元素选择器之间存在冲突，类选择器占了上风，使段落文本变成了红色。即使冲突的样式在样式表的后面出现，这怎么可能发生呢？一个类被认为是更具体的，因此它比元素选择器优先级更高，所以它取消了其他冲突的样式声明。

自己试试这个实验吧！添加 HTML 代码，然后添加两个 p { } 规则到你的样式表。接下来，把第一个 p 选择器改为 .special，看看它是如何改变样式的。

优先级和层叠的规则起初看起来很复杂。随着你对 CSS 越来越熟悉，这些规则就容易理解了。下一个模块中的层叠和继承一节对此进行了详细解释，包括如何计算优先级。

现在，请记住优先级的存在。有时，CSS 可能不会像你预期的那样应用，因为样式表中的其他东西可能有更高的优先级。认识到不止一个规则可以适用于一个元素，是解决这类问题的第一步。