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：我们没有封装任何东西，我们在组件中定义的样式已经泄漏出去并开始影响其他组件。

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

1 个答案: