原文連結：http://blog.csdn.net/u010977147/article/details/53740424
對于我們寫的每個 Angular 元件來說，除了定義 HTML 模闆之外，我們還要定義用于模闆的 CSS 樣式、 指定任意的選擇器、規則和媒體查詢。
實作方式之一，是在元件的中繼資料中設定
styles
屬性。
styles
屬性可以接受一個包含 CSS 代碼的字元串數組。 通常我們隻給它一個字元串就行了，如同下例：
COPY CODE
@Component({
selector: 'hero-app',
template: `
<h1>Tour of Heroes</h1>
<hero-app-main [hero]=hero></hero-app-main>`,
styles: ['h1 { font-weight: normal; }']
})
export class HeroAppComponent {
/* . . . */
}
元件樣式在很多方面都不同于傳統的全局性樣式。
首先，我們放在元件樣式中的選擇器，隻會應用在元件自身的模闆中。上面這個例子中的
h1
選擇器隻會對
HeroAppComponent
模闆中的
<h1>
标簽生效，而對應用中其它地方的
<h1>
元素毫無影響。
這種子產品化相對于 CSS 的傳統工作方式是一個巨大的改進：
- 可以使用對每個元件最有意義的 CSS 類名和選擇器。
- 類名和選擇器是僅屬于元件内部的，它不會和應用中其它地方的類名和選擇器出現沖突。
- 我們元件的樣式不會因為别的地方修改了樣式而被意外改變。
- 我們可以讓每個元件的 CSS 代碼和它的 TypeScript、HTML 代碼放在一起，這将促成清爽整潔的項目結構。
- 将來我們可以修改或移除元件的 CSS 代碼，而不用周遊整個應用來看它有沒有被别處用到，隻要看看目前元件就可以了。
特殊的選擇器
元件樣式中有一些從影子 DOM 樣式範圍 (Shadow DOM style scoping) 領域引入的特殊選擇器：
:host
使用
:host
僞類選擇器，用來選擇元件宿主元素中的元素（相對于元件模闆内部的元素）。
COPY CODE
:host {
display: block;
border: px solid black;
} 這是我們能以宿主元素為目标的唯一方式。除此之外，我們将沒辦法指定它， 因為宿主不是元件自身模闆的一部分，而是父元件模闆的一部分。
要把宿主樣式作為條件，就要像函數一樣把其它選擇器放在
:host
後面的括号中。
在下一個例子中，我們又一次把宿主元素作為目标，但是隻有當它同時帶有
active
CSS 類的時候才會生效。
COPY CODE
:host(.active) {
border-width: px;
} :host-context
有時候，基于某些來自元件視圖外部的條件應用樣式是很有用的。 例如，在文檔的
<body>
元素上可能有一個用于表示樣式主題 (theme) 的 CSS 類，而我們應當基于它來決定元件的樣式。
這時可以使用
:host-context()
僞類選擇器。它也以類似
:host()
形式使用。它在目前元件宿主元素的祖先節點中查找 CSS 類， 直到文檔的根節點為止。在與其它選擇器組合使用時，它非常有用。
在下面的例子中，隻有當某個祖先元素有 CSS 類
theme-light
時，我們才會把
background-color
樣式應用到元件内部的所有
<h2>
元素中。
COPY CODE
:host-context(.theme-light) h2 {
background-color: #eef;
} /deep/
元件樣式通常隻會作用于元件自身的 HTML 上。
我們可以使用
/deep/
選擇器，來強制一個樣式對各級子元件的視圖也生效，它不但作用于元件的子視圖，也會作用于元件的内容。
在這個例子中，我們以所有的
<h3>
元素為目标，從宿主元素到目前元素再到 DOM 中的所有子元素：
COPY CODE
:host /deep/ h3 {
font-style: italic;
} /deep/
選擇器還有一個别名
>>>
。我們可以任意交替使用它們。
/deep/
和
>>>
選擇器隻能被用在仿真 (emulated) 模式下。 這種方式是預設值，也是用得最多的方式。 更多資訊，見控制視圖封裝模式一節。
![ionic3随筆（一）[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)