如何使用LESS查找嵌套类

Question

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

目前使用：Angular 1.5 with LESS

目前我正在使用角度应用程序，其中页眉和页脚是常见的，但中间内容将变化如下...

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

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

我的问题是如果我在较少的文件中写.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 }