深度選擇器 (Deep Selector) - daniel-qa/Vue GitHub Wiki

Vue 開發中，當我們使用 scoped CSS 時，父組件的樣式預設不會影響子組件內部的 DOM。

為了修改子組件（如 iView 的組件）內部的樣式，我們需要使用深度選擇器（Deep Selectors）。

  • 常用語法對照表
語法類型 標籤 適用場景
原生 CSS >>> 純 CSS 環境下最快。
預處理器 /deep/ Vue 2 + Less / Sass 的標準做法，最推薦你使用。
現代推薦 ::v-deep Vue 2.7+ 或 Vue 3 的通用標準，具備更好的兼容性。
  • Vue 3 只支援新版語法
::v-deep(.child) {
  color: red;
}

或

::v-deep .child {
  color: red;
}

⚠️ Vue 3 已正式淘汰：

>>> 
/deep/
  • 範例
<style lang="less" scoped>
/* 這是 Windsurf 中最常寫的方式 */
.my-container /deep/ .ivu-input {
    border-color: #2d8cf0;
    box-shadow: 0 0 5px rgba(45, 140, 240, 0.2);
}
</style>

最新是用 ::v-deep

<style scoped>
/* 如果你沒用 Less，或者想要更標準的語法 */
.my-container ::v-deep .ivu-modal-header {
    background-color: #f8f8f9;
}
</style>

p.s 註解 //

< style> 標籤有設定 lang="less" 或 lang="scss"，才能使用 //

否則要使用 /* 我是註解 */
  • 如果使用全域(style 不加 scope):

如果你為了方便（不想寫 /deep/）而選用一般的 <style>，請務必養成這個習慣：

「永遠為組件的最外層加上一個唯一的 Class 名稱」

<template>
  <div class="custom-login-panel"> <Button type="primary">登入</Button>
  </div>
</template>

<style>
/* 這樣寫雖然是一般 style，但只會影響 custom-login-panel 下的 iView 按鈕 */
.custom-login-panel .ivu-btn-primary {
  background-color: #ff6600;
}
</style>
  • 總結： 一般的 style 會像洪水一樣灌入所有子組件。如果你不希望這種「無差別影響」發生，請務必使用 scoped 搭配深度選擇器，或是確保你的 CSS 選擇器夠具體（Specific）。
⚠️ **GitHub.com Fallback** ⚠️