CSS是一门复杂的语言，具有相当的能力。它允许我们为页面添加布局和设计，允许多个元素甚至多个页面共享样式。在我们有能力解锁所有功能之前，我们必须首先充分了解它的基本原理。首先，我们需要清楚地了解样式是如何呈现的。具体来说，我们需要知道不同类型的选择器是如何工作的，以及这些选择器的顺序如何影响样式的呈现方式。我们还需要了解一些在CSS中不断出现的常见属性值，尤其是影响颜色和长度的属性值。现在让我们来看看在CSS的幕后究竟发生了什么。Cascading我们先通过看所谓的cascading来分析样式的呈现方式，然后学习一些cascading的例子。在CSS中，所有样式表中的样式都是自上而下层叠的，可以添加新的样式，也可以覆盖已有的样式。比如我们先在样式表中将所有段落
的背景设置为橙色，字号设置为24px。接下来，我们添加另一种样式，将段落
的背景设置为绿色，如下所示：p{background:orange;font-size:24px;}p{background:green;}由于背景设置为绿色选择器在背景设置为橙色的选择器下方，所以优先级更高，所有段落
最终都会显示一个绿色背景。但是字体大小仍然是24px，因为在第二个段落选择器中没有定义字体大小。属性级联选择器内的属性也可以级联。仍然以段落为例，我们将所有段落元素
的背景设置为橙色。然后直接在这个属性下设置一个背景为绿色，如下图：p{background:orange;background:green;}由于背景色值green是在orange之后声明的，所以会覆盖orange，最终所有的段落元素
的背景色都是绿色。所有样式从上到下层叠。但有时级联不起作用：当我们使用多个不同类型的选择器来设置样式时，级联关系就会被打破。这就是我们下面要说的。计算出的特征的每个选择器都有一个权重值，一个选择器的权重和级联关系决定了呈现什么样的风格。在第一课“构建您的第一个页面”中，我们提到了不同种类的选择器：类型选择器、类选择器、ID选择器。每种类型的选择器都有一个权重值。类型选择器的权重最低。它的值为0-0-1，类选择器的权重以0-1-0的值为中心。最后一个是ID选择器，权重最高，值为1-0-0。我们可以看到，权重值由三列数字组成，第一列是ID选择器，第二列是Class选择器，第三列是类型选择器。同样，ID选择器的权重高于类选择器，类选择器的权重高于类型选择器。权重值权重值是有意用连字符连接的——因为它们的值不是十进制数。Class选择器权重值不是数字10，ID选择器权重不是数字100。这些数字应分别读取为0-1-0和1-0-0。我们将看到为什么权重值在复合选择器中用连字符连接。当样式冲突时，选择器的权重值越高，优先级越高。例如，当一个段落元素
同时使用类型选择器和ID选择器时，无论ID选择器的级联关系如何，ID选择器的优先级更高。HTML
中有一个id属性，其值为food。在CSS中，这个段落元素由两种类型的选择器选择：类型选择器和ID选择器。虽然类型选择器写在ID选择器之后，但是ID选择器比类型选择器好，因为它有更高的权重值，所以段落最终显示为绿色背景。请记住不同类型选择器的权重值。有时样式不会按预期呈现，因为选择器权重会破坏级联规则，因此它们无法正确显示。了解级联和权重的工作原理是一件困难的事情，我们将继续讨论这个话题。现在，让我们看看如何组合选择器，使它们更精确、更有意义。组合选择器到目前为止，我们已经学习了如何单独使用各种类型的选择器，但现在我们需要知道如何一起使用它们。通过组合选择器，我们可以选择更具体的元素或元素组。例如，我们要选中热狗元素中的所有段落元素
，并将它们的背景色设置为棕色。但是class属性值为mustard的段落元素
的背景色应该设置为黄色。代码如下：HTML ... ...