在 CSS 中，&?符號是?嵌套語法中的父選擇器引用符，主要用于?CSS 預處理器（如 Sass、Less、Stylus）和?現代 CSS 嵌套語法（CSS Nesting）。它代表當前選擇器的父級，用于簡化嵌套規則并生成更精確的選擇器。

1、實例一

第一種寫法：

css

.resume-dialog-wrap {&.t-dialog--default {padding: 0 !important;}
}

編譯結果：

[data-v-xxxxxxx] .resume-dialog-wrap.t-dialog--default {padding: 0 !important;
}

解釋：

• &表示將兩個類選擇器連接在一起，匹配同時擁有這兩個類的元素

• 這會選擇同時具有resume-dialog-wrap和t-dialog--default類的元素

第二種寫法：

css

.resume-dialog-wrap {.t-dialog--default {padding: 0 !important;}
}

編譯結果：

css

[data-v-xxxxxxx] .resume-dialog-wrap .t-dialog--default {padding: 0 !important;
}

解釋：

• 這種寫法表示選擇resume-dialog-wrap元素內部的t-dialog--default元素

• 這是后代選擇器的關系，不是同時擁有兩個類的元素

關鍵區別：

1. 第一種寫法（.resume-dialog-wrap.t-dialog--default），有&連接選擇器，是AND關系，無空格，匹配的是單個元素同時擁有兩個類

2. 第二種寫法（.resume-dialog-wrap .t-dialog--default），無&連接選擇器，有空格，空格分隔表示父子/后代關系，匹配的是一個元素內部的后代元素

2、實例二

scss

.button {&:hover {color: red;}
}

編譯后：

css

.button:hover {color: red;
}

&?在這里代表?.button，最終生成?.button:hover。