ViewEncapsulation 更改 css 样式的特异性（权重）

Question

我创建了一个新的 Angular CLI 项目和一个组件，我在其中尝试过处理 css 特异性。在我尝试过的地方，类样式会覆盖标签样式，但只有在 Angular 项目中它的工作反之亦然

我发现 ViewEncapsulation.None 使 css 样式显示深绿色背景色，并使用有角度的默认视图封装 (ViewEncapsulation.Emulated) 浏览器显示浅绿色背景色。

组件代码

import { Component, OnInit } from '@angular/core';
import {ToastrService} from "ngx-toastr";
//import {ViewEncapsulation} from "@angular/cli/lib/config/schema";


@Component({
  selector: 'app-toastr',
  templateUrl: './toastr.component.html',
  styleUrls: ['./toastr.component.css'],
  //encapsulation: ViewEncapsulation.None
})

html代码

<div>
  <div class="myspan">
    something
  </div>
</div>

和样式

div div{
background-color: aqua;
}

.myspan {
  background-color: darkgreen;
}

我希望得到一个答案，为什么它的工作方式不同

Answer 1

仅供参考

ViewEncapsulation.Emulated：我们在组件上定义的任何样式都不会泄漏到应用程序的其余部分。但是，该组件仍然继承了 twitter bootstrap 等全局样式。

ViewEncapsulation.Native：我们在组件上设置的样式不会泄漏到组件范围之外。组件也与我们为应用程序定义的全局样式隔离开来。

ViewEncapsulation.None：我们没有封装任何东西，我们在组件中定义的样式已经泄露出来并开始影响其他组件。