如何在HTML中的特定页面中调用css样式？

Question

我以角度创建网页。我有三个样式表。所有页面都会调用这三个文件。现在，我想为我的主页执行特定的CSS块。我为这个过程尝试了较少的文件。

HTML：

//主页的代码

<div class="homePage">
<div class="content">

</div>
</div>

//内页的代码

<div class="content">

</div>

CSS：

.homePage
{
    .content
    {
        background-color: #F00;
        color: #FFF;
    }
}
.content
{
    background-color: #000;
    color: #FFF;
}

但它不起作用。请帮我。

Answer 1

您可以为.content div

设置全局样式

.content {
    background-color: #000;
    color: #FFF;
}

每当您想要覆盖.content div样式或添加页面特定样式时，只需将.content div包装到父div中

HTML

<div class="home-page">
   <div class="content"></div>
</div>

CSS

.home-page .content {
    background-color: #F00;
}

Answer 2

这应该有效

.content {
  background-color: #000;
  color: #FFF;
}
.homepage.content {
   background-color: #F00 !important;;
   color: #FFF !important;
}

编辑发表评论。如上所述，我个人不会用这个。我要么使用不同的名称，要么使用另一个div来包含第二个例子来区分它。