视图封装更改 css 样式的特异性（权重）

Question

我发现了这种封装。“无”使css样式显示暗绿色背景颜色，并且使用角度默认视图封装（viewenculation.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
})

代码

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

和风格

div div{
background-color: aqua;
}

.myspan {
  background-color: darkgreen;
}

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

Answer 1

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

视图封装。原生：我们在组件上设置的样式不会泄漏到组件范围之外。组件还与我们为应用程序定义的全局样式隔离。

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