CSS 程式札記 : 選擇器

在網頁中，每個按鈕、文字或圖片等都是通過 CSS 來設定它們的樣子，要做到這點，我們就需要用到 CSS 選擇器。本文會從最簡單的選擇器開始講起，讓你了解如何使用 CSS 選擇器。

什麼是 CSS 選擇器？

當我們瀏覽網頁時，每個元素都有它的樣式，像是文字的顏色、大小或是按鈕的形狀，這些樣式都是由 CSS 控制的，而 CSS 選擇器可以幫助我們精確的選取到目標元素，並告訴 CSS 要針對哪些元素進行樣式的修改。

常用的 CSS 選擇器

在 CSS 中，有許多不同的選擇器，以下是一些常見的選擇器：

1. 基本選擇器

• *：選取頁面上的所有元素。
• .className：選取帶有特定 class 的元素。
• #idName：選取具有特定 id 的元素。
• element：選擇指定的HTML元素，例如：p 會選擇所有的 p 元素。

2. 關聯選擇器

• elementA, elementB：同時選擇 elementA 和 elementB。
• elementA elementB：選取 elementA 內的 elementB。
• elementA > elementB：選取 elementA 的子元素 elementB。

3. 屬性選擇器

• element[attr]：選擇有特定屬性的元素。
• element[attr=val]：選擇屬性值為特定值的元素。

4. 偽類和偽元素

• 偽類：例如 :hover，這會選擇滑鼠移到元素上的狀態。

• 偽元素：例如 ::before，這會在元素的內容前面插入內容。

😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊

❤️按個愛心｜💬留言互動｜🔗分享此文｜📌追蹤阿梧｜☕請喝咖啡