Html 为什么CSS不'；与角6选择器组件不匹配？

app.html

<app-chat></app-chat>

<h1>Hello</h1>

<h1>Hello</h1>

<h1 class="exampleClassName">Helo<h1>

chat.css

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.css']
})
export class ChatComponent implements OnInit {
  constructor() { }

  ngOnInit() {
  }
}

h1 {
    background-color: #000;
}

h1 {
    background-color: #000;
}

我需要知道为什么

chat.css

在我的浏览器中不起作用。当我在没有聊天组件的情况下直接使用CSS时，它可以正常工作（如下所示）

app.html

<app-chat></app-chat>

<h1>Hello</h1>

<h1>Hello</h1>

<h1 class="exampleClassName">Helo<h1>

---

那么解决方案是什么呢？

试试

！重要信息

在chat.css文件中

h1{
   background-color: #000 !important;
}

或

使用CSSstyle.CSS的强大武器。但是，在使用它之前，您必须为h1标记设置类名

chat.html

<app-chat></app-chat>

<h1>Hello</h1>

<h1>Hello</h1>

<h1 class="exampleClassName">Helo<h1>

试试这个

::ng-deep h1{
   background-color: #000;
}

---

我做了一个例子，效果很好：

建议使用

！重要信息

是一件非常不负责任的事情：P@inconnu我更新了我的答案。检查一下你有解决方案吗？嘿，请同时发布

chat.component.ts

你能在一个提琴/片段中与我们分享你的问题的工作示例吗？因为正如您所说的，如果正确加载到组件上，那么“chat.css”文件中的css应该可以工作，而无需将css代码放在外部的“.css”文件中。这就是它在chat.css中通常的工作方式？你能解释一下：：ng deep功能吗！