CSS层级，也称为CSS层叠，指的是当多个CSS选择器同时应用于同一个元素时，决定哪个选择器的样式将优先显示的规则。层级是CSS中非常重要的概念，因为它决定了网页显示的最终效果。

在CSS层级中，选择器的优先级是根据具体的规则来确定的。一般来说，具有更高层级的选择器优先级更高，将被应用在元素上。下面将详细介绍CSS层级的相关规则和实例。

CSS选择器的层级优先级规则如下：

1. !important：具有!important声明的样式将拥有*的优先级，并将覆盖其他所有样式。

2. 内联样式：在HTML标签中直接使用style属性定义的样式拥有较高的优先级。

3. ID选择器：通过元素的ID属性选择元素的样式具有更高的优先级。

4. 类选择器和属性选择器：通过类名或属性选择器来选择元素的样式。

5. 标签选择器和伪类选择器：通过标签名或伪类来选择元素的样式。

6. 通用选择器、子选择器、相邻选择器和后代选择器：这些选择器的优先级较低，将被更具体的选择器所覆盖。

7. 继承样式：如果元素没有指定特定的样式，将继承父元素的样式。

下面是一个实例来说明CSS层级的具体应用：

```html

This is a heading

```

在上述示例中，h1标签使用了!important声明，因此优先级*，文本将显示为红色。接下来，通过ID选择器选择的元素样式优先级较高，因此“myDiv”内的所有文本将显示为蓝色。

在“myDiv”内部，有一个类选择器和一个属性选择器，它们的优先级相同，但属性选择器更具体，因此链接元素的文本将显示为橙色，而类选择器为绿色。

标签选择器和伪类选择器仅应用于文本元素，因此h1标签将显示为黄色，而当鼠标悬停在链接上时，链接文字将变为粉色。

*是继承样式，段落中的文本将继承父元素的颜色，上述示例中，它将显示为黄色。

总结起来，CSS层级决定了哪个选择器的样式最终显示在元素上。在开发和设计网页时，了解CSS层级的规则和原理非常重要，可以帮助开发人员控制网页的外观和样式。