css - ViewEncapsulation 更改 css 样式特异性(权重)

Question

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

我发现 ViewEncapsulation.None 使 css 样式显示深绿色背景颜色，并且使用 Angular 默认 View 封装 (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:我们没有封装任何东西，我们在组件中定义的样式已经泄露并开始影响其他组件。