Angular2 是一個流行的前端框架，它提供了很多方便的功能，例如組件化開發和 CSS 的封裝。在這篇文章中，我們將重點關注 Angular2 組件的 CSS。

我們知道，組件是 Angular2 應用程序的基礎。每個組件都有自己的樣式表。簡單地說，CSS 是用來定義 HTML 結構的樣式的。在 Angular2 中，CSS 可以被用來更好地控制組件的外觀和行為。

那么，如何在 Angular2 中使用 CSS 呢？首先，我們需要了解組件的結構。一個組件由三個部分組成：HTML 模板、樣式和控制器。樣式代碼通常放在組件的 .css 文件中。

下面是一個簡單的組件代碼示例：

import { Component } from '@angular/core';
@Component({
selector: 'app-example',
template: `
Welcome to my example
`,
styles: [`
h1 {
color: red;
}
`]
})
export class ExampleComponent {}

在上面的代碼中，我們定義了一個名為 ExampleComponent 的組件。樣式代碼是通過 styles 屬性來定義的。樣式代碼通常使用類選擇器、標簽選擇器或屬性選擇器來選擇元素。

如果想要給組件內的某個元素添加樣式，我們可以使用偽類選擇器。例如，要添加鼠標懸停時的效果，可以使用 :hover 偽類，如下所示：

import { Component } from '@angular/core';
@Component({
selector: 'app-example',
template: `Click me!`,
styles: [`
.btn-primary {
color: white;
background-color: blue;
padding: 5px 10px;
text-decoration: none;
}
.btn-primary:hover {
background-color: darkblue;
}
`]
})
export class ExampleComponent {}

在上述代碼示例中，我們使用了 :hover 偽類來為我們的鏈接添加了一個效果。當鼠標經過鏈接時，它的背景顏色會變成深藍色。

總的來說，使用 Angular2 組件的 CSS 可以讓我們更好地控制組件的外觀和行為。我們需要了解組件的組成部分，并選擇合適的選擇器來為組件添加樣式。