Question

app.html

<app-chat></app-chat>

chat.html

<h1>Hello</h1>

聊天

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() {
  }
}

chat.css

h1 {
    background-color: #000;
}

我需要知道为什么chat.css在我的浏览器中不起作用。当我直接使用没有聊天组件的CSS时，它可以工作（如下所示）。

app.html

<h1>Hello</h1>

app.css

h1 {
    background-color: #000;
}

那该怎么办？

Answer 1

在chat.css文件中尝试!important

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

或

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

chat.html

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

下一步，在您的 style.css 文件中

.exampleClassName{
     background-color: #000;
 }

Answer 2

尝试一下！

SDWebImageDownloader

Answer 3

我举了一个例子，它可以工作：https://stackblitz.com/edit/angular-u99pry

为什么CSS与Angular 6选择器组件不匹配？

3 个答案: