如何實現(xiàn)vue、angular深度作用選擇器

小編給大家分享一下如何實現(xiàn)vue、angular深度作用選擇器，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

10年積累的網(wǎng)站建設、成都網(wǎng)站設計經(jīng)驗，可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡服務。我雖然不認識你，你也不認識我。但先網(wǎng)站設計后付款的網(wǎng)站建設流程，更有攸縣免費網(wǎng)站建設讓你可以放心的選擇與我們合作。

Vue適用的深度選擇器

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

less使用/deep/
css使用>>>

Angular適用深度選擇器

使用組件樣式

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

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

<!--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ù)中指定的樣式只會對該組件的模板生效

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

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

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

  1. 可以使用對每個組件最有意義的 CSS 類名和選擇器。

  2. 類名和選擇器是局限于該組件的，它不會和應用中其它地方的類名和選擇器沖突。

  3. 組件的樣式不會因為別的地方修改了樣式而被意外改變。

  4. 你可以讓每個組件的 CSS 代碼和它的 TypeScript、HTML 代碼放在一起，這將促成清爽整潔的項目結(jié)構(gòu)。

  5. 將來你可以修改或移除組件的 CSS 代碼，而不用遍歷整個應用來看它有沒有在別處用到。

特殊的選擇器

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

:host

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

<!--src/app/hero-details.component.css-->:host {
 display: block;
 border: 1px solid black;
}

:host 選擇是是把宿主元素作為目標的唯一方式。除此之外，你將沒辦法指定它， 因為宿主不是組件自身模板的一部分，而是父組件模板的一部分。

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

下一個例子再次把宿主元素作為目標，但是只有當它同時帶有 active CSS 類的時候才會生效。

<!--src/app/hero-details.component.css-->content_copy
:host(.active) {
 border-width: 3px;
}

:host-context

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

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

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

<!--src/app/hero-details.component.css-->content_copy
:host-context(.theme-light) h3 {
 background-color: #eef;

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

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

把偽類 ::ng-deep 應用到如何一條 CSS 規(guī)則上就會完全禁止對那條規(guī)則的視圖包裝。任何帶有 ::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) 模式下。 這種方式是默認值，也是用得最多的方式。 更多信息，見控制視圖封裝模式一節(jié)。

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

以上是“如何實現(xiàn)vue、angular深度作用選擇器”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當前文章：如何實現(xiàn)vue、angular深度作用選擇器
網(wǎng)頁鏈接：http://muchs.cn/article28/ijdpcp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、網(wǎng)頁設計公司、微信公眾號、網(wǎng)站設計公司、云服務器、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都app開發(fā)公司