Scoped Style Overrides - daniel-qa/Vue GitHub Wiki

這個概念叫做 Scoped Style Overrides 或 Component Style Encapsulation。

更具體的術語：

Deep Selector（/deep/ 或 ::v-deep）— Vue 官方術語，穿透子元件的樣式封裝
Scoped CSS — Vue 的樣式作用域機制
Style Encapsulation — 樣式封裝

在 CSS 架構設計上，這種「以父層容器為邊界，統一管理內部子元件樣式」的方式，比較接近：

BEM（Block Element Modifier） 的 Block 概念

Component-scoped styling — 以元件為單位的樣式管理

在實際開發討論中，通常會說：

「用 /deep/ 做 scoped override，把樣式限定在這個 block 裡面」

---

因為 .school-name 是一個父層 div，在裡面用 /deep/ 就可以統一管理該區域內所有子元件的樣式，不用跑到別的地方去找：

css.school-name {
  // 自己的樣式
  position: absolute;
  ...

  // 統一管理這個區域內的 iView 元件樣式
  /deep/ .ivu-select-selection { ... }   // 影響區域內所有 Select
  /deep/ .ivu-input { ... }              // 影響區域內所有 Input
  /deep/ .ivu-date-picker-rel .ivu-input { ... }  // 只影響 DatePicker 的 Input
}

好處是：

樣式集中管理，易維護

不會影響到 .school-name 以外的地方

可以針對不同子元件做細部調整