Html 角度生成的css子组合符

场景：

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

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

• 尝试在angular 6.1.2（）中运行一些flexbox演示代码这里是一个具体的示例（）

• 它不起作用，在拨弄了一段时间后，它看起来像是CSS被修改成了浏览器不喜欢的方式

相关CSS:

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

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

这就是我得到的

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

工作案例：

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

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

问题：

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

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

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

---

请尝试使用

：host

，以获取更多参考

您也可以尝试使用

/deep/

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

---

嘿，我发现第二种样式很有效，

请尝试使用

:host

，以获取更多参考

您也可以尝试使用

/deep/

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

---

嘿，我发现第二种样式很有效，

太棒了，这就成功了：）需要注意的是，这必须在app.component.css中，styles.css没有给出预期的结果。但这很好：）@BasHamer，在他们自己的组件中使用组件样式可以让你的应用加载更快、更轻。您可以分析gtmatrix或chrome light house中的变化差异，这起到了关键作用：）需要注意的是，这必须在app.component.css和styles.css中进行，因为它们没有给出所需的结果。但这很好：）@BasHamer，在他们自己的组件中使用组件样式可以让你的应用加载更快、更轻。您可以在gtmatrix或chrome light house audit中分析变化差异