在本教程中，我们将学习CSS的重要概念。

覆盖样式规则

我们可以通过附加类来覆盖为选择器定义的样式规则。

在下面的示例中，我们定义了样式规则，该规则将p元素的颜色设置为红色。
然后我们通过添加类blue覆盖它，将颜色更改为blue。

/* set color of all p to red */
p {
	color : red;
}

/* if class blue added to p then override its color to blue */
p.blue {
	color : blue;
}

因此，所有段落将具有红色，任何具有蓝色类别的段落将具有蓝色。

级联

CSS代表级联样式表 Cascading Style Sheet。
级联一词具有重要意义。
它告诉我们如何应用样式规则。
也就是说，对于不同的样式方法存在一个层次结构。
首先，应用内联样式，然后应用head标记中的任何样式，然后考虑来自外部文件的样式规则。

External stylesheet file
    |
    V
Embedded style rule
    |
    V
Inline style rule

级联-覆盖样式规则

如果样式规则排在最后，则它将获得最高优先级。

考虑以下示例，如果我们为选择器p定义了三个样式规则。

/**
 * first style rule for p
 */
p {
	font-size : 18px;
	color : red;
}

/**
 * second style rule for p
 */
p {
	font-size : 20px;
	font-weight : 300;
	color : blue;
}

/**
 * third style rule for p
 */
p {
	color : green;
}

p的颜色规则在所有三个规则中定义，但只有最后一个规则，即对所有p都应用" color：green"。
这是因为它在最后出现，因此它覆盖了所有p的其他颜色规则。

字体大小规则是在第一和第二中定义的，因此要考虑第二个字符，即" font-size：20px;"将用于所有p。

字体粗细仅在第二条规则中定义，因此将其应用于所有p。

因此，以上三个规则可以组合为一个，我们可以为p编写以下样式规则。

p {
	font-size : 20px;
	font-weight : 300;
	color : green;
}

分组通用样式

如果我们对不同的选择器具有相同的样式，则可以使用逗号将它们分组在一起，并且只编写一次样式。

在下面的示例中，我们为三个不同的选择器提供了一个示例样式规则。

h1 {
	color : red;
}

p#team-a {
	color : red;
}

span.group1 {
	color : red;
}

我们可以按以下方式对上述规则进行分组。

h1, p#team-a, span.group1 {
	color : red;
}

样式继承

子元素从父元素继承样式规则。

在下面的示例中，我们为具有类red-container的div定义了一条规则。
因此，所有子元素都继承了父元素的样式。

.red-container {
	color : red;
}

<div class="red-container">
  <h1>Hello World</h1>
  <p>This is a paragraph.</p>
</div>

由于上述规则，div元素的所有子元素将具有红色。

继承体型

如果要定义一组样式规则，以使页面中的所有其他元素都可以继承，则可以设置主体样式规则。

在下面的示例中，我们为body标签定义了样式规则，然后由所有子元素继承。

body {
	background-color : #fff;
	color : #000;
	padding : 0;
	margin : 0;
}

上下文选择器-将样式规则应用于子元素

如果仅在样式元素是给定元素的后代(即子元素)时才想将样式规则应用于元素，则应先编写父元素选择器，然后再编写子元素和规则。

在以下示例中，如果span元素是段落p元素的子元素，则将其颜色设置为blue。

p span {
	color : blue;
}

在下面的示例中，我们有一个标头元素h1，并且仅当它是具有类容器的元素的子元素时，其颜色才会设置为"红色"。

.container h1 {
	color : red;
}