Question

将Angular组件与styleUrl和单独的样式表文件一起使用时，每个CSS选择器的范围都将限定在输出中的组件中。

现在让我们说我想要定义一条规则，当一篇文章后面跟着另一个特定组件时，后者需要一个margin-top。在这种情况下，当一个文章卡后面跟着一个文章组元素。

标记将是这样的：

<article-group
    [topArticlesOnly]="true"
    [articles]="homepage.top | slice:0:6">
</article-group>
<article-card
    *ngFor="let article of homepage.top | slice:0:6"
    [article]="article">
</article-card>

两者都将包含一个div，其中包含您将在以下示例中看到的特定类。

我试过这样的事情：

[article-card] + [article-group] {
    margin-top: 20px;
}

article-card + article-group {
    margin-top: 20px;
}

就像这样：

.article-card + .article-group {
    margin-top: 20px;
}

但两者都不起作用，因为当Angular编译它时，标记的浏览器输出将是这样的：

<div _ngcontent-c3="">
    <article-card _ngcontent-c3="" _nghost-c4="" ng-reflect-article="[object Object]" ng-reflect-show-image-only="true">
        <article _ngcontent-c4="" class="article-card article-card--top-article article-card--image-only" ng-reflect-klass="article-card"
            ng-reflect-ng-class="[object Object]">
        </article>
    </article-card>
    <article-group _ngcontent-c3="" _nghost-c5="" ng-reflect-articles="[object Object],[object Object" ng-reflect-top-articles-only="true">
        <div _ngcontent-c5="" class="article-group article-group--top">

        </div>
    </article-group>
</div>

输出CSS的作用如下：

[article-card][_ngcontent-c5]+ [article-group][_ngcontent-c5] {
    margin-top: 30px;
}

article-card[_ngcontent-c5] + article-group[_ngcontent-c5] {
    margin-top: 30px;
}

也许它需要一些组合：host-context或：host，但即使这样，我也从未让我的选择器应用于正确的上下文。

那么有没有办法在Angular样式表中使用Adjacent Sibling CSS Selector？

Answer 1

尝试使用view encapsulation.none，这样你就无法获得额外的[_ngcontent-c5]

import {
  Component, ViewEncapsulation
} from '@angular/core';

@Component({
  selector: 'app-something',
  encapsulation: ViewEncapsulation.None
})

Answer 2

可以添加类，如下所示：

<article-group class="article-group"
    [topArticlesOnly]="true"
    [articles]="homepage.top | slice:0:6">
</article-group>

<article-card class="article-card"
    *ngFor="let article of homepage.top | slice:0:6"
    [article]="article">
</article-card>

和

.article-card + .article-group {
    margin-top: 20px;
}

Answer 3

利用 :host 选择器来引用“当前”组件。像这样：

article-card + :host {
    margin-top: 20px;
}

如何在Angular中使用CSS Adjacent兄弟选择器？

3 个答案: