1.5 KiB
1.5 KiB
title, localeTitle
| title | localeTitle |
|---|---|
| Override Styles in Subsequent CSS | 覆盖后续CSS中的样式 |
覆盖后续CSS中的样式
想要在后续CSS中覆盖样式时要记住的最重要的一点是创建类的顺序。
最后更新的样式将优先于先前编写的类。
例如：
<style>
body {
color: purple;
}
.red-text {
color: red;
}
.blue-text {
color: blue;
{
</style>
现在，当您创建在任何文本body ，它将具有文本颜色purple分配给它。
要开始尝试覆盖过程，您现在可以添加"red-text"类来查看结果。
使用上面的格式，下面的文本将覆盖以前的purple字体颜色与red 。
<h1 class="red-text">Example</h1>
如果要添加多个类，可以使用以下格式：
<h1 class="class-name1 class-name2 class-name3">Example</h1>
您现在可以将上面创建的最后一个类（ "blue-text" ）添加到上面的相同示例中以查看结果。
<h1 class="red-text blue-text">Example</h1>
这将自动选择在样式部分中创建的最后一个类，在本例中为"blue-text" 。
即使您在第二类blue-text red-text后面应用第一类red-text blue-text ，覆盖过程也将选择最后创建的类。在这种情况下，该类是blue-text 。
所以，例如：
<h1 class="blue-text red-text">Example</h1>
由于样式部分的排序，这仍然会显示blue字体颜色。
最后创建了blue-text类，底部是</style> 。