Question

这是结构。

<parent>
    <child>
        <grand-child>
        ........
        </grand-child>
    </child>
</parent>

现在，我的父亲拥有带有bootstrap和所有调色板的主要全局css样式表。在我的孩子中，我给了另一个样式表，其中包含ViewEncapsulation.Emulated以扩展它的范围。但我的大孩子需要父母而不是孩子。即使按照等级，孩子是大孩子的父母。如果我想让大孩子采取孩子而不是父母的风格，该怎么办。

parent.css

button{
background: red none;
}

因此，每个按钮都应该是红色的。

我的孩子是管理员控制台。所以它有一个全新的外观和感觉。

child.css

button{
background: gray none;
}

grand-child.component.html有一个按钮。所以我希望它会变成灰色，因为它是在孩子的范围内。但它变红了。

Answer 1

我认为您的样式应该按原样运行，但添加:host可能值得一试：

:host button {
  background: red none;
}

:host button {
  background: gray none;
}

在Angular 2中将格式的范围限制为来自孩子的格兰德儿童？

1 个答案: