角度生成的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%;
}

问题：

• 是否有一种方法可以停止角度调整？
• 在演示中使用的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