如何在共享模块中更改共享模块的样式?

Question

我有三个模块A, B和c。

模块A被B和c共享

模块A使用全局CSS从app.component.css，就像

.section-top-padding {
padding-top: 11.25rem;
padding-bottom: 4.0625rem;
}

模块B的html为:

<app-module-A></app-module-A>

模块C的html是:

<app-module-A></app-module-A>

我想改变模块B中的css样式

.section-top-padding {
padding-top: 10px;
padding-bottom: 5rem;
}

同样，我希望模块C中的样式像

.section-top-padding {
padding-top: 0px;
padding-bottom: 4.0625rem;
}

我试图通过使用模块B和c的单独css来改变css，但它不起作用。我怎么能做到这一点，如果我不想改变全局CSS，因为它正在被其他模块也使用。

Answer 1

假设你的模块将共享同一个容器，你可以使用CSS:n -of-type() Selector

app-module-A {
padding-top: 11.25rem;
padding-bottom: 4.0625rem;
border:1px solid #000;
width:100px;
display:inline-block;
}
app-module-A:nth-of-type(2) {
padding-top: 10px;
padding-bottom: 5rem;
}
app-module-A:nth-of-type(3) {
padding-top: 0px;
padding-bottom: 4.0625rem;
}

<app-module-A></app-module-A>
<app-module-A></app-module-A>
<app-module-A></app-module-A>