CSS 文件結構選擇器是非常基本的選擇器，除了可以利用 HTML 文件結構的親子關係選取元素，也能透過子代選擇器「>」、兄弟選擇器「~」或相鄰兄弟選擇器「+」的交互應用，快速找到 HTML 文件裡的特定元素，這個單元會介紹 CSS 文件結構選擇器。

影片重點：

• 00:00:50 HTML 文件結構的親子關係
• 00:01:50 後代選擇器
• 00:04:14 子代選擇器
• 00:06:11 兄弟選擇器
• 00:07:45 相鄰兄弟選擇器

相關參考：

• 教學文：文件結構選擇器
• 影片連結：https://www.youtube.com/watch?v=y32KO3dj7XI

後記

來談一下我做範例的 JS-Bin，第一次接觸 JS-Bin 是在 N 年前某次去參加了社團，講者用這套工具展示了一些前端技術，當時身為小鮮肉的自己真是驚艷不已，於是不顧阿姨要我別努力，就這樣一直用這套線上工具用到現在，而且我現在還是覺得他超好用，特別是在展示範例的效果還是一樣讚，很推薦給大家喔！

更多參考：

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