Css 造型如何在angular中的组件上工作？

这个问题不清楚，但我会详细解释。在angular中，我们可以编写用于样式设置的独立css。它对原生html元素非常有效。但与react不同，angular使用自定义元素（如

…

）包装html。当我为那些包装器元素编写css时，它不起作用

如果我有这样的帖子列表

<div class="post-list">
   <app-card [post]="post" *ngFor="let post of posts"></app-card>
</div>

---

我怎样才能让它工作？或者使用角度逻辑，如何在角度组件之间应用垂直间隙

您可以在

div

标记中进行迭代，然后添加您的类

<div class="post-list">
   <div class="post" *ngFor="let post of posts">
       <app-card [post]="post"></app-card>
   </div>
</div>

---

您可以在组件中定义

封装：ViewEncapsulation.None

，如下所示：

@Component({
    selector: 'foo',
    template: './foo.component.html',
    styleUrls: ['./foo.component.scss'],
    encapsulation: ViewEncapsulation.None
})
export class FooComponent { }

如果你把你的.css放在全局范围内，它会像对待你的一样对待它

---

更准确地说，它不会将foo.component.scss中的每个css规则添加到中，没有理由不起作用。只是试着在这里输入一些代码

app.component.html

<div class="post-list">
  <app-new *ngFor="let item of [1,2,3,4]"></app-new>
</div>

而且它工作得很好。你在找别的东西吗

如果您想直接向组件添加样式（边距），首先需要根据需要将组件的显示设置为block/flex

.post-list app-new:not(:last-child) {
  display: flex;
}

---

只需添加

显示：块应用程序卡
组件上的code>&它将按预期工作


。发布列表应用程序卡{
显示：块；
}
.发布列表应用程序卡：非（：最后一个孩子）{
边缘底部：2rem；
}

卡1
卡2
卡片3
我知道有一些解决办法。我正在寻找更有效的方法，创建额外的元素或改变封装模式，我知道有一些解决方法。我正在寻找更有效的方法，创建额外的元素或更改封装模式而不是此示例更改封装模式我知道，我感谢您的帮助，但我正在寻找更优雅的方法来实现它。而不是违反模块器样式。只需添加display:block；在应用程序卡组件上&它将按预期工作。请参阅答案中的工作示例。嗯，它确实起了作用。我没想到。谢谢您的帮助。@TeomanTıngır实际上默认情况下，角度组件是内联元素，所以您在内联元素上应用了边距&边距仅适用于块元素，这就是您的样式不起作用的原因。我明白了。我是知识的泄露者，你，我没有考虑组件的显示属性。
.post-list app-new:not(:last-child) p {
  margin-top: 2rem;
  color: green;
}

.post-list app-new:not(:last-child) {
  display: flex;
}