vue、angular深度做用選擇器

Vue適用的深度選擇器

在 Vue 的開發中，咱們常常會用到外部組件庫，例如 element，當使用 element 組件庫中的某一個組件的時，咱們可能會但願有一些定製的地方，一般的作法是 用CSS覆蓋；有時層級不夠就要另闢他徑。

less使用/deep/

css使用>>>
複製代碼

Angular適用深度選擇器

使用組件樣式

對你編寫的每一個 Angular 組件來講，除了定義 HTML 模板以外，還要定義用於模板的 CSS 樣式、 指定任意的選擇器、規則和媒體查詢。

實現方式之一，是在組件的元數據中設置 styles 屬性。 styles 屬性能夠接受一個包含 CSS 代碼的字符串數組。 一般你只給它一個字符串就好了，如同下例：

<!--src/app/hero-app.component.ts-->

@Component({
  selector: 'app-root',
  template: `
    <h1>Tour of Heroes</h1>
    <app-hero-main [hero]="hero"></app-hero-main>
  `,
  styles: ['h1 { font-weight: normal; }']
})
export class HeroAppComponent {
/* . . . */
}
複製代碼

範圍化的樣式

在@Component的元數據中指定的樣式只會對該組件的模板生效

它們既不會被模板中嵌入的組件繼承，也不會被經過內容投影（如 ng-content）嵌進來的組件繼承。

在這個例子中，h1 的樣式只對 HeroAppComponent 生效，既不會做用於內嵌的 HeroMainComponent ，也不會做用於應用中其它任何地方的 h1 標籤。

這種範圍限制就是所謂的樣式模塊化特性

1. 可使用對每一個組件最有意義的 CSS 類名和選擇器。
2. 類名和選擇器是侷限於該組件的，它不會和應用中其它地方的類名和選擇器衝突。
3. 組件的樣式不會由於別的地方修改了樣式而被意外改變。
4. 你可讓每一個組件的 CSS 代碼和它的 TypeScript、HTML 代碼放在一塊兒，這將促成清爽整潔的項目結構。
5. 未來你能夠修改或移除組件的 CSS 代碼，而不用遍歷整個應用來看它有沒有在別處用到。

特殊的選擇器

組件樣式中有一些從影子(Shadow) DOM 樣式範圍領域（記錄在W3C的CSS Scoping Module Level 1中） 引入的特殊選擇器：

:host

使用 :host 僞類選擇器，用來選擇組件宿主元素中的元素（相對於組件模板內部的元素）。

<!--src/app/hero-details.component.css-->

:host {
  display: block;
  border: 1px solid black;
}
複製代碼

:host 選擇是是把宿主元素做爲目標的惟一方式。除此以外，你將沒辦法指定它， 由於宿主不是組件自身模板的一部分，而是父組件模板的一部分。

要把宿主樣式做爲條件，就要像函數同樣把其它選擇器放在 :host 後面的括號中。

下一個例子再次把宿主元素做爲目標，可是隻有當它同時帶有 active CSS 類的時候纔會生效。

<!--src/app/hero-details.component.css-->

content_copy
:host(.active) {
  border-width: 3px;
}
複製代碼

:host-context

有時候，基於某些來自組件視圖外部的條件應用樣式是頗有用的。 例如，在文檔的 元素上可能有一個用於表示樣式主題 (theme) 的 CSS 類，你應當基於它來決定組件的樣式。

這時可使用 :host-context() 僞類選擇器。它也以相似 :host() 形式使用。它在當前組件宿主元素的祖先節點中查找 CSS 類， 直到文檔的根節點爲止。在與其它選擇器組合使用時，它很是有用。

在下面的例子中，只有當某個祖先元素有 CSS 類 theme-light 時，纔會把 background-color 樣式應用到組件內部的全部 h2 元素中。

<!--src/app/hero-details.component.css-->

content_copy
:host-context(.theme-light) h2 {
  background-color: #eef;
}
複製代碼

已廢棄 /deep/、>>> 和 ::ng-deep

組件樣式一般只會做用於組件自身的 HTML 上。

把僞類 ::ng-deep 應用到如何一條 CSS 規則上就會徹底禁止對那條規則的視圖包裝。任何帶有 ::ng-deep 的樣式都會變成全局樣式。爲了把指定的樣式限定在當前組件及其下級組件中，請確保在 ::ng-deep 以前帶上 :host 選擇器。若是 ::ng-deep 組合器在 :host 僞類以外使用，該樣式就會污染其它組件。

這個例子以全部的 h3 元素爲目標，從宿主元素到當前元素再到 DOM 中的全部子元素：

<!--src/app/hero-details.component.css-->

content_copy
:host /deep/ h3 {
  font-style: italic;
}
複製代碼

/deep/ 組合器還有兩個別名：>>> 和 ::ng-deep。

/deep/ 和 >>> 選擇器只能被用在仿真 (emulated) 模式下。 這種方式是默認值，也是用得最多的方式。 更多信息，見控制視圖封裝模式一節。

CSS 標準中用於 "刺穿 Shadow DOM" 的組合器已經被廢棄，並將這個特性從主流瀏覽器和工具中移除。 所以，咱們也將在 Angular 中移除對它們的支持（包括 /deep/、>>> 和 ::ng-deep）。 目前，建議先統一使用 ::ng-deep，以便兼容未來的工具。