1.選擇器

Vue3 中幾種獨(dú)有的選擇器 深度選擇器:deep()、插槽選擇器:slotted()耐量、全局選擇器 :global()

scoped原理：
在Vue組件中满钟，如果使用了scoped樣式，子組件樣式將不會被渲染到父組件中优幸。 scoped 通過在DOM結(jié)構(gòu)以及css樣式上加唯一不重復(fù)的標(biāo)記:data-v-hash的方式，以保證唯一（而這個工作是由過PostCSS 轉(zhuǎn)譯實(shí)現(xiàn)的）叙凡，達(dá)到樣式私有化模塊化的目的劈伴。
當(dāng) <style> 標(biāo)簽帶有 scoped 的時(shí)候，它的 CSS 只會影響當(dāng)前組件的元素握爷，它的實(shí)現(xiàn)方式是通過 PostCSS 將以下內(nèi)容：

<style scoped>
.example {
  color: red;
}
</style>
 
<template>
  <div class="example">hi</div>
</template>

轉(zhuǎn)化為：

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>
 
<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

總結(jié)一下scoped三條渲染規(guī)則：

• 給HTML的DOM節(jié)點(diǎn)加一個不重復(fù)data屬性(形如：data-v-123)來表示他的唯一性
• 在每句css選擇器的末尾（編譯后的生成的css語句）加一個當(dāng)前組件的data屬性選擇器（如[data-v-123]）來私有化樣式
• 如果組件內(nèi)部包含有其他組件跛璧，只會給其他組件的最外層標(biāo)簽加上當(dāng)前組件的data屬性

1、深度選擇器 :deep()

處于 scoped 樣式中的選擇器如果想要做更“深度”的選擇新啼，也即：影響到子組件追城，可以使用 :deep() 這個偽類：

作用：深度選擇器可以匹配組件中嵌套的子組件。

常見作用場景：修改組件庫樣式

使用示例：

<template>
  <div>
    <div class="parent">
        <el-input></el-input>
  </div>
</template>
 
<style scoped>
  /* 選擇子組件中的元素 */
  .parent :deep(.el-input__inner) {
    background: red;
  }
/* 此時(shí)css解析的為 .outer[data-v-xxxx] .el-input__inner 樣式生效 */
</style>

上面的代碼會被編譯成：

.parent[data-v-f3f3eg9] .el-input__inner {
  background: red;
}

TIPＴ镒病Ｗ！

通過 v-html 創(chuàng)建的 DOM 內(nèi)容不會被作用域樣式影響物舒，但你仍然可以使用深度選擇器來設(shè)置其樣式色洞。

2、插槽選擇器 :slotted()

默認(rèn)情況下冠胯，作用域樣式不會影響到 <slot/> 渲染出來的內(nèi)容火诸，因?yàn)樗鼈儽徽J(rèn)為是父組件所持有并傳遞進(jìn)來的。使用 :slotted 偽類以明確地將插槽內(nèi)容作為選擇器的目標(biāo)：

作用：插槽選擇器可以用來選擇插槽中的內(nèi)容荠察。

使用示例：

<template>
 <div class="content">
    <slot></slot>
  </div>
</template>
 
<style scoped>
/* 選擇默認(rèn)插槽元素 */
 
.content :slotted(.red) {
  color: red;
}
 
</style>

3置蜀、全局選擇器 :global()

如果想讓其中一個樣式規(guī)則應(yīng)用到全局奈搜，比起另外創(chuàng)建一個 <style>，可以使用 :global 偽類來實(shí)現(xiàn) (看下面的代碼)：

作用：全局選擇器可以用來選擇不受scoped樣式影響的元素盯荤。

使用示例：

<template>
  <div class="container">
    <div class="global-child"></div>
  </div>
</template>
 
<style scoped>
  /* 選擇全局樣式 */
  :global(.global-child) {
    color: red;
  }
</style>

4馋吗、混合使用局部與全局樣式

你也可以在同一個組件中同時(shí)包含作用域樣式和非作用域樣式：

<style>
/* 全局樣式 */
</style>
 
<style scoped>
/* 局部樣式 */
</style>

原文鏈接：https://blog.csdn.net/qq_44848480/article/details/134726338