開發網頁時，隨著架構複雜度的增加，管理 CSS 樣式也變得更加困難。為了避免樣式互相污染和提升維護性，CSS 加入了 @scope 規則定義，透過「作用域」的概念，讓開發者能更精確的控制樣式範圍，這個單元會介紹 @scope 的概念、用法、嵌套、權重以及 :scope 虛擬類別選擇器的相互應用。

影片重點：

• 00:01:20 認識 CSS @scope
• 00:03:32 @scope 限制範圍
• 00:06:08 @scope 的權重
• 00:08:16 @scope 使用 :scope 選擇器與「&」特殊符號
• 00:11:08 @scope 嵌套的巢狀結構
• 00:12:35 @scope 和純粹使用選擇器的差異

相關參考：

• 教學文：CSS @scope 作用域
• 影片連結：https://www.youtube.com/watch?v=mn8EwvpcSb4

後記

今天嘗試了 Google AI Studio 的 nano banana，真的有種「哇！好強大呀！」的感覺，甚至還有一種衝動，想要真正拿它來做一本故事書繪本，雖然說畫出來的影像 AI 感還是有點重，但是在「固定角色」的部分真的是挺完美的，例如下圖就是「我就讚」和「國父」在喝咖啡，滿不賴的呀！

更多參考：

• Youtube 頻道：https://www.youtube.com/@steam.oxxostudio
• CSS 教學大全：https://steam.oxxostudio.tw/category/css/index.html