解析vue、angular深度作用選擇器

在 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: `
  <h2>Tour of Heroes</h2>
  <app-hero-main [hero]="hero"></app-hero-main>
 `,
 styles: ['h2 { font-weight: normal; }']
})
export class HeroAppComponent {
/* . . . */
}

范圍化的樣式

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

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

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

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

• 可以使用對每個組件最有意義的 CSS 類名和選擇器。
• 類名和選擇器是局限于該組件的，它不會和應用中其它地方的類名和選擇器沖突。
• 組件的樣式不會因為別的地方修改了樣式而被意外改變。
• 你可以讓每個組件的 CSS 代碼和它的 TypeScript、HTML 代碼放在一起，這將促成清爽整潔的項目結構。
• 將來你可以修改或移除組件的 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 樣式應用到組件內部的所有 h3 元素中。

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

content_copy
:host-context(.theme-light) h3 {
 background-color: #eef;
}

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

組件樣式通常只會作用于組件自身的 HTML 上。

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

這個例子以所有的 h4 元素為目標，從宿主元素到當前元素再到 DOM 中的所有子元素：

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

content_copy
:host /deep/ h4 {
 font-style: italic;
}

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

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

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

總結

以上所述是小編給大家介紹的vue、angular深度作用選擇器,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！