html - 如何使用 LESS 查找嵌套类

Question

我需要编写特定的 CSS 以应用于单个 html 文件

目前使用:Angular 1.5 with LESS

目前我正在使用 Angular 应用程序，其中页眉和页脚很常见，但中间内容会有所不同，如下所示...

<div class="header">Header</div>
<div class="container">
     <div class="home-page">Home</div>
</div>    
<div class="footer">Footer</div>

这是第二页的代码

<div class="header">Header</div>
<div class="container">
     <div class="contact-us">Contact</div>
</div>
<div class="footer">Footer</div>

现在，我需要将页脚固定在第二页，相对页脚固定在第一页。在这里，每个页面都有特定的 less 文件。

我的问题是，如果我在 less 文件中编写 .footer{position:fixed}，所有页面都会受到影响。

我找到了类似Internal css is working in ContactUs.html(或)Adding new CSS in JS file using element这样的解决方案，但我想知道有什么办法使用 less 或 css 文件解决问题？

请查找以供引用。每当我们看到加载 roadmap-page 时，就需要应用 CSS。

Answer 1

您可以使用 CSS 兄弟选择器 + 来实现这一点。如果.footer与.contact-us 同级然后位置将被固定。您可以在常用的 styles.css 或 styles.less 文件中编写以下 CSS 代码

.contact-us + .footer {
  position: fixed;

}

.home-page + .footer {
  position: relative;

}

如果你想动态地设置类到你的页脚组件，最好使用@Input()装饰器。我会做的是

footer.component.ts

@Input() styleClass = 'footer';

footer.component.html

<div [class]="styleClass">Footer text</div>

contacts.component.html

<app-footer [styleClass]="'footer-fixed'">Footer text</div>

home.component.html

<app-footer>Footer text</div>

CSS

.footer-fixed { position: fixed }
.footer { position: relative }