样式不适用于子组件

Question

我正在尝试将样式应用于子组件标签，但我不能这样做。

我有带有锚标记的子组件。

尽管我在父组件中有锚标记的样式，但它不适用。有什么解决办法？

工作代码：http://plnkr.co/edit/CJCpV4ZbG7hdxT2AeSmt?p=preview

 <a href="https://www.google.com">Google</a>

在父组件中，我使用子组件并为此子组件应用样式。

HTML代码：

<div class="container">
  <div class="test">
    <testapp></testapp>
  </div>
</div>

CSS代码：

.container{
  font-family:sans-serif;
  font-size:18px;
  border: 1px solid black;
}
.test{
  width:50%;
  background-color:#f0f5f5;
}

.container:hover .test{
  background-color:#e6ffe6;
}
.container:hover .test:hover{
  background-color:#ffffe6;
}
.container .test a {
    color:   red ;
}
.container .test a:hover {
    color:green;
}

Answer 1

这是因为默认组件有视图封装（shadow dom）。要禁用此行为，您可以利用encapsulation 属性，如下所述：

import {Component, ViewEncapsulation} from '@angular/core';
import {TestApp} from 'testapp.component.ts';
@Component({
  selector:'test-component',
  styleUrls: ['test.component.css'],
  templateUrl: './test.component.html',
  directives:[TestApp],
  encapsulation: ViewEncapsulation.None // <------
})
export class TestComponent{

}

看到这个 plunkr：http://plnkr.co/edit/qkhkfxPjgKus4WM9j9qg?p=preview。

Answer 2

当使用 styleUrls 属性时，样式对于一个组件是本地的，而不是它的子组件。所以我做了两个改变： 1) 将 styleUrls 移至 testapp 组件。 2) 将 div 移至 testapp 组件。

import {Component} from '@angular/core';
@Component({
 selector:'testapp',
 styleUrls: ['./test.component.css'],
 template: `
 <div class="test">
  <a href="https://www.google.com">Google</a>
 </div>

 `

})
export class TestApp{

}

Answer 3

已编辑：这应该可以解决：

在子类的css中写下代码

:host.parentclass childclass{

}

父类是子类的直接父类。 childclass 是应用于子组件的类。