在 SCSS 中，父選擇器 & 是巢狀語法的一個進階應用。它可以代表當前巢狀規則中的父選擇器，這樣可以在巢狀的過程中靈活地引用外層的選擇器，並用來處理伺機狀態（如 :hover）或偽元素，甚至在巢狀結構中重新組合選擇器。

一、什麼是偽元素（Pseudo-elements）

是 CSS 提供的一種功能，讓開發者能夠為文檔中某些元素的特定部分應用樣式，而不需要在 HTML 中新增額外的標籤。常見的偽元素包括 ::before 和 ::after，它們允許你在元素的內容之前或之後插入自定義的內容。

偽元素常見用途

1.插入內容：

你可以使用 ::before 或 ::after 在元素之前或之後插入內容，例如裝飾符號或圖標。範例如下

div::after {
  content: "放上去會變喔";
  color: blue;
}

div:hover::after {
  content: "你看八";
  color: pink;
}

鼠標放上去之前

鼠標放上去之後

2.美化界面：

偽元素可以用來製作一些裝飾性的設計元素，像是陰影、下劃線或額外的邊框。

3.不影響 DOM 結構：

偽元素不會改變 HTML 的 DOM 結構，它們的內容是純樣式上的變更，因此非常適合用於非功能性但美觀的變更。

二、&父選擇器的應用

父選擇器 & 常用於以下幾個場景：

1.處理伺機狀態：

& 可以用來編寫父選擇器的狀態變化，例如 :hover(懸浮)、:focus(獲得焦點的元素) 等。

2.偽元素與偽類：

使用 & 來定義偽元素如 ::before 和 ::after，使樣式規則更加直觀。

3.重新組合選擇器：

& 還可以用來組合選擇器，特別是在編寫修飾類（modifier classes）時

4.範例

.button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;

  // & 代表父選擇器 .button
  &:hover {
    background-color: darken(#3498db, 10%);
  }

  // 偽元素
  &::before {
    content: "★";
    margin-right: 10px;
  }

  // 修飾類
  &-large {
    padding: 20px 40px;
  }
}

三、巢狀中的常見錯誤與解決

1.巢狀層次過深：

過深的巢狀會讓程式碼難以維護。例如，巢狀超過三層會讓選擇器過於具體，這使得樣式難以重用。解決辦法是保持巢狀層次淺且結構簡單，避免不必要的深層巢狀。

2.過度依賴父選擇器：

過度使用 & 可能導致冗長的選擇器，這會降低可維護性。正確的做法是只在必要的地方使用父選擇器，避免過度嵌套。

3.重複定義選擇器：

在巢狀結構中，容易因不小心重複定義選擇器，這會導致樣式衝突。解決辦法是定期檢查巢狀結構，確保沒有不必要的重複選擇器。

這裡好像不能放影片，以下的連結可以更清晰的了解偽元素是如何運作的!

https://w3c.hexschool.com/blog/5667df85