1.5 KiB
1.5 KiB
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>
。