freeCodeCamp

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