CSS样式级联的规则如下：
1. 给定的属性设置优先级高的样式将重写优先级低的样式；
2. 样式表中靠后的声明将覆盖先前的声明；
3. 直接在HTML标签中指定的样式将覆盖在外部样式表中定义的相同样式；
4. 样式设置为!important的声明将具有更高的优先级。
下面给出一个具体的例子：
<style>
p {
color: red;
}
.example {
color: green;
}
#title {
color: blue;
}
</style>
<p id="title" class="example">这是一段测试文字</p>在这个例子中，段落<p>元素同时应用了样式表中的三个样式: p、.example和#title。那么，它应该显示什么样式呢？
根据CSS样式级联的规则，样式表中id选择器#title定义的blue颜色最后被应用，因此该段落应该呈现为蓝色字体。这就是样式级联机制。
需要注意的是，对于样式的继承机制不属于样式级联范畴，也就是说，后续样式表中定义的某些样式可能会继承先前的样式。因此，在编写CSS时，大家需要了解不同类型的选择器可以如何作用于文档，并理解每种选择器的优先级如何影响样式属性的应用。