css层叠性例子 |scss 转css

p {
font-size: 14px;
}
.highlight {
font-size: 18px;
}
#special p {
font-weight: bold;
}

假设大家有以下HTML代码：

<div id="special">
<p class="highlight">这是一个重要的段落</p>
</div>

根据CSS层叠性的原则，这个段落会同时应用三个CSS规则。首先，<p>元素会应用到通用的样式，字号为14像素。其次，由于这个段落有一个class为“highlight”，所以它会应用到.highlight规则，字号变成了18像素。最后，这个段落在一个id为“special”的<div>元素内，所以它会应用到#special p规则，字重为粗体。

这个例子展示了CSS层叠性在实际中的应用。大家可以通过多个CSS规则来控制一个元素的样式，从而达到大家想要的效果。