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

在 Vue 的開發(fā)中，我們經(jīng)常會(huì)用到外部組件庫，例如 element，當(dāng)使用 element 組件庫中的某一個(gè)組件的時(shí)，我們可能會(huì)希望有一些定制的地方，通常的做法是 用CSS覆蓋；有時(shí)層級(jí)不夠就要另辟他徑。

less使用/deep/

css使用>>>

Angular適用深度選擇器

使用組件樣式

對你編寫的每個(gè) Angular 組件來說，除了定義 HTML 模板之外，還要定義用于模板的 CSS 樣式、 指定任意的選擇器、規(guī)則和媒體查詢。

實(shí)現(xiàn)方式之一，是在組件的元數(shù)據(jù)中設(shè)置 styles 屬性。 styles 屬性可以接受一個(gè)包含 CSS 代碼的字符串?dāng)?shù)組。 通常你只給它一個(gè)字符串就行了，如同下例：

<!--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的元數(shù)據(jù)中指定的樣式只會(huì)對該組件的模板生效

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

在這個(gè)例子中，h2 的樣式只對 HeroAppComponent 生效，既不會(huì)作用于內(nèi)嵌的 HeroMainComponent ，也不會(huì)作用于應(yīng)用中其它任何地方的 h2 標(biāo)簽。

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

• 可以使用對每個(gè)組件最有意義的 CSS 類名和選擇器。
• 類名和選擇器是局限于該組件的，它不會(huì)和應(yīng)用中其它地方的類名和選擇器沖突。
• 組件的樣式不會(huì)因?yàn)閯e的地方修改了樣式而被意外改變。
• 你可以讓每個(gè)組件的 CSS 代碼和它的 TypeScript、HTML 代碼放在一起，這將促成清爽整潔的項(xiàng)目結(jié)構(gòu)。
• 將來你可以修改或移除組件的 CSS 代碼，而不用遍歷整個(gè)應(yīng)用來看它有沒有在別處用到。
  

特殊的選擇器

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

:host

使用 :host 偽類選擇器，用來選擇組件宿主元素中的元素（相對于組件模板內(nèi)部的元素）。

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

:host {
 display: block;
 border: 1px solid black;
}

:host 選擇是是把宿主元素作為目標(biāo)的唯一方式。除此之外，你將沒辦法指定它， 因?yàn)樗拗鞑皇墙M件自身模板的一部分，而是父組件模板的一部分。

要把宿主樣式作為條件，就要像函數(shù)一樣把其它選擇器放在 :host 后面的括號(hào)中。

下一個(gè)例子再次把宿主元素作為目標(biāo)，但是只有當(dāng)它同時(shí)帶有 active CSS 類的時(shí)候才會(huì)生效。

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

content_copy
:host(.active) {
 border-width: 3px;
}

:host-context

有時(shí)候，基于某些來自組件視圖外部的條件應(yīng)用樣式是很有用的。 例如，在文檔的 元素上可能有一個(gè)用于表示樣式主題 (theme) 的 CSS 類，你應(yīng)當(dāng)基于它來決定組件的樣式。

這時(shí)可以使用 :host-context() 偽類選擇器。它也以類似 :host() 形式使用。它在當(dāng)前組件宿主元素的祖先節(jié)點(diǎn)中查找 CSS 類， 直到文檔的根節(jié)點(diǎn)為止。在與其它選擇器組合使用時(shí)，它非常有用。

在下面的例子中，只有當(dāng)某個(gè)祖先元素有 CSS 類 theme-light 時(shí)，才會(huì)把 background-color 樣式應(yīng)用到組件內(nèi)部的所有 h3 元素中。

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

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

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

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

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

這個(gè)例子以所有的 h4 元素為目標(biāo)，從宿主元素到當(dāng)前元素再到 DOM 中的所有子元素：

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

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

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

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

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

總結(jié)

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