CSS 程式札記 : 選擇器
更新於 2024/02/04閱讀時間約 1 分鐘
在網頁中，每個按鈕、文字或圖片等都是通過 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，這會在元素的內容前面插入內容。
😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊
60會員
91內容數
「梧笙」即「吾生」，意即我的生命，朋友都叫我「阿梧(Awu)」，高雄人。我喜歡學習新技能，從程式設計到網路工具，再到社群經營和影片剪輯。日常興趣是打遊戲、看動漫、讀小說和聽音樂。我會把這些興趣寫成文章，如果你有任何想法或問題，歡迎來信到我的郵箱 aowulife109@gmail.com
留言0
查看全部
你可能也想看
Google News 追蹤
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
本篇最主要是要了解網站前端工程師究竟是什麼？主要工作內容又有哪些？將從三個部份來說明：前端的工作內容、前端所需的軟實力以及前端所需的硬實力。
老師請問tailwind是什麼呢？
Tailwind 是一個現代化的 CSS 框架，它的設計理念是「高度可定制的實用型 CSS 庫」。與其他 CSS 框架不同的是，Tailwind 不是基於預先定義好的樣式類別和樣式集合，而是提供了大量的 CSS 實用類別，讓開發者可以更靈活地自由組合和應用。
請您現在扮演一位幽默博學的老師，回答什麼是sass中的mixin概念
很高興回答這個問題！在 Sass 中，Mixin 是一種可以將一組 CSS 屬性集合放在一起，以便在需要的地方重複使用的功能。Mixin 可以包含變量、條件語句、迴圈和其他 CSS 屬性，使其更加靈活和強大。
● 學習時態，整理了一些資訊。
● 做了 AWS 前端的上機考題，how many words.有卡，但後來有好好學到 regex 的用法了(把中文維基百科有耐心看過就行)
● 早上10 點 HIIT @公園 -> 整整20分鐘我幾乎做完全部，有明顯進步！
從身邊最小的事物開始吧!
這是我學習完基礎JavaScript後第一個做成的Project，應該是每個前端都一定會做過的project，但對於自學的我非常有挑戰性，我需要訓練自己在短時間內熟悉JS event並且運用他做出我的第一個搭配大量JS程式碼的網頁作品。
教到了JS event，非常實用的一堂課程，開始進入監聽階段，可以跟使用者互動，也慢慢建立UX的概念，讓我可以開始自行設計動態網頁，並且優化了第二個靜態網頁，加入了滾動變化的效果。
網頁設計的工作主要是要設計介面（user interface, UI），並把它轉化成前端介面。先不說設計能力，在技術方面，比較不講究架構或是效能。而在日常工作中，也不太需要常常客製化介面與互動。
無須基礎，只要「複製 ＋ 貼上」就能學會
(RWD Bootstrap + jQueryUI + fancyBox + CKeditor + Google Chart)
每個特效均為您示範 WebFomr + MVC 雙重範例
ASP.NET 教學 — 前端特效輕鬆學 (9.9小時)
課程介紹
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
本篇最主要是要了解網站前端工程師究竟是什麼？主要工作內容又有哪些？將從三個部份來說明：前端的工作內容、前端所需的軟實力以及前端所需的硬實力。
老師請問tailwind是什麼呢？
Tailwind 是一個現代化的 CSS 框架，它的設計理念是「高度可定制的實用型 CSS 庫」。與其他 CSS 框架不同的是，Tailwind 不是基於預先定義好的樣式類別和樣式集合，而是提供了大量的 CSS 實用類別，讓開發者可以更靈活地自由組合和應用。
請您現在扮演一位幽默博學的老師，回答什麼是sass中的mixin概念
很高興回答這個問題！在 Sass 中，Mixin 是一種可以將一組 CSS 屬性集合放在一起，以便在需要的地方重複使用的功能。Mixin 可以包含變量、條件語句、迴圈和其他 CSS 屬性，使其更加靈活和強大。
● 學習時態，整理了一些資訊。
● 做了 AWS 前端的上機考題，how many words.有卡，但後來有好好學到 regex 的用法了(把中文維基百科有耐心看過就行)
● 早上10 點 HIIT @公園 -> 整整20分鐘我幾乎做完全部，有明顯進步！
從身邊最小的事物開始吧!
這是我學習完基礎JavaScript後第一個做成的Project，應該是每個前端都一定會做過的project，但對於自學的我非常有挑戰性，我需要訓練自己在短時間內熟悉JS event並且運用他做出我的第一個搭配大量JS程式碼的網頁作品。
教到了JS event，非常實用的一堂課程，開始進入監聽階段，可以跟使用者互動，也慢慢建立UX的概念，讓我可以開始自行設計動態網頁，並且優化了第二個靜態網頁，加入了滾動變化的效果。
網頁設計的工作主要是要設計介面（user interface, UI），並把它轉化成前端介面。先不說設計能力，在技術方面，比較不講究架構或是效能。而在日常工作中，也不太需要常常客製化介面與互動。
無須基礎，只要「複製 ＋ 貼上」就能學會
(RWD Bootstrap + jQueryUI + fancyBox + CKeditor + Google Chart)
每個特效均為您示範 WebFomr + MVC 雙重範例
ASP.NET 教學 — 前端特效輕鬆學 (9.9小時)
課程介紹