html - Angular 生成的 css 破坏了子组合器

Question

场景:

• 尝试在 angular 6.1.2 (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 中运行一些 flexbox 演示代码，这里是具体示例 (https://codepen.io/chriscoyier/pen/vWEMWw)

• 它不起作用，在仔细研究之后，它看起来像 CSS 以浏览器不喜欢的方式修改。

相关 CSS :

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

这是我得到的

.wrapper[_ngcontent-c0]    > *[_ngcontent-c0] {
  padding: 10px;
  flex: 1 100%;
 }

工作案例:

.wrapper[_ngcontent-c0]    > * {
  padding: 10px;
  flex: 1 100%;
}

问题:

• 有没有办法阻止 angular 这样做？
• 我在演示中使用的 CSS 有问题吗？

Answer 1

尝试使用:host，更多引用Check the component styling guide

:host .wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

你也可以尝试使用/deep/

:host /deep/ .wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

嘿，我发现第二种样式有效，Checkout the stackblitz demo