小编use*_*528的帖子

:host 被通用 CSS 选择器覆盖

我们在一个通用样式文件中重置了 CSS (margin:0px;padding:0px;),我们将其作为一个组件编写,并作为我们正在开发的其他组件的一部分包含在内。

我们使用如下通用选择器

*,*:before,*:after{
color:pink

}
Run Code Online (Sandbox Code Playgroud)

在我们的每个组件上,我们都有一个:host样式,我们试图用它来覆盖这个颜色

:host{
color:yellow
}
Run Code Online (Sandbox Code Playgroud)

奇怪的是,我们期望:host比通用选择器有更多的特异性,但事实并非如此。通用选择器样式覆盖了我们的:host样式

我们只想要组件 z-foo 的 MAKE ME GREEN 样式(在附加的 plnkr 示例中)

尝试了多种方法,似乎没有任何效果

http://plnkr.co/edit/l8NSJT?p=preview

它是粉红色的,这意味着它仍然被通用选择器覆盖

*,*:before,*:after{
color:pink

}
Run Code Online (Sandbox Code Playgroud)

javascript css css-selectors shadow-dom polymer-2.x

4
推荐指数
1
解决办法
482
查看次数

标签 统计

css ×1

css-selectors ×1

javascript ×1

polymer-2.x ×1

shadow-dom ×1