Angular中ViewEncapsulation为何改变CSS选择器优先级？

这其实是Angular的**视图封装（ViewEncapsulation）**机制在背后起作用，咱们结合你的代码一步步拆解差异原因：

1. 默认的ViewEncapsulation.Emulated模式（背景显示aqua的情况） #

Angular默认启用Emulated封装，核心目的是让组件样式只作用于自身内部，避免污染全局或其他组件的样式。它的实现逻辑是：

• 给组件内部所有DOM元素添加一个独特的属性（比如_ngcontent-abc123）
• 自动修改组件的CSS样式，给每个选择器末尾附加这个属性选择器，确保样式只匹配组件内的元素

对应你的代码，原CSS会被Angular转换成类似这样：

div[_ngcontent-abc123] div[_ngcontent-abc123] { background-color: aqua; }
.myspan[_ngcontent-abc123] { background-color: darkgreen; }

现在计算两个选择器的CSS优先级（权重规则：元素选择器=1，类/属性选择器=10）：

• div[_ngcontent-abc123] div[_ngcontent-abc123]：2个元素选择器 + 2个属性选择器 → 1+10 +1+10 = 22
• .myspan[_ngcontent-abc123]：1个类选择器 +1个属性选择器 →10+10= 20

因为22>20，所以div div的样式优先级更高，最终背景显示为aqua，这就解释了为什么和常规CSS表现相反。

2. ViewEncapsulation.None模式（背景显示darkgreen的情况） #

当设置encapsulation: ViewEncapsulation.None时，Angular会完全关闭视图封装：

• 不会给DOM元素添加任何独特属性
• 组件的CSS样式会直接变成全局样式，不做任何修改

此时你的CSS就是常规的全局样式：

div div{ background-color: aqua; }
.myspan { background-color: darkgreen; }

按照常规CSS优先级计算：

• div div：2个元素选择器 → 1+1=2
• .myspan：1个类选择器 →10

10>2，所以类选择器的样式生效，背景显示为darkgreen，和你预期的常规场景一致。

总结一下：Angular的Emulated封装通过给选择器附加属性选择器，改变了原有的优先级权重，导致看起来和常规CSS表现相反；而None模式下样式完全遵循常规CSS规则。

内容的提问来源于stack exchange，提问作者Olena Kachmar