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

Question

我已经以 Angular 创建网页。我有三个样式表。这三个文件在所有页面都会被调用。现在，我想为我的主页执行特定的 CSS block 。我为此过程尝试了更少的文件。

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;
}