在網頁開發中，CSS 選擇器是幫助我們定位 HTML 元素並進行樣式設置的核心工具。無論你是前端新手還是資深開發者，熟練掌握 CSS 選擇器都是提升開發效率的關鍵。本篇文章將帶你從最基本的選擇器到一些進階技巧，讓你更高效地控制網頁元素的外觀。
基本 CSS 選擇器
1. 通用選擇器（Universal Selector）
通用選擇器是最基礎的選擇器，會選中頁面上的所有元素。它通常用來設置全局的樣式，例如為所有元素設置box-sizing 屬性來確保元素的尺寸計算一致。* {
box-sizing: border-box;
}
這樣，所有元素的寬度和高度將包括邊框和內邊距，這樣做可以防止元素溢出，保持布局的一致性。
2. 標籤選擇器（Type Selector）
標籤選擇器是最直接的選擇器之一，通過元素的名稱來選擇 HTML 元素。例如，選擇所有的 div 元素：
div {
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 10px;
}
在這裡，我們選擇了所有的 div 標籤，並設置了其寬度、高度、背景顏色以及底部邊距。
進階 CSS 選擇器
3. 類別選擇器（Class Selector）
類別選擇器通過 . 開頭，選擇指定 class 屬性的元素。例如，選擇 .box-1 類別的元素並設置其圓角：
.box-1 {
border-radius: 50%;
}
這會讓 .box-1 元素變成圓形。
4. ID 選擇器（ID Selector）
ID 選擇器使用 # 開頭，通常用來選擇具有特定 id 屬性的單個元素。這是針對唯一元素的選擇器。
#box-2 {
background-color: blueviolet;
}
這段程式選擇了 id="box-2" 的元素並為其設置了背景顏色。
5. 群組選擇器（Group Selector）
群組選擇器讓你可以在一條 CSS 規則中同時選擇多個元素。只需使用逗號將選擇器分開即可。
#box-2, #box-3 {
width: 30px;
height: 30px;
}
這裡，#box-2 和 #box-3 都會擁有相同的寬度和高度。
進階布局技巧：後代、兄弟選擇器
6. 後代選擇器（Descendant Selector）
後代選擇器通過空格來連接選擇器，用來選擇某個元素內的子元素或更深層的後代元素。它可以讓我們精確地選擇嵌套結構中的元素。
.box-1 .box-11 {
width: 100px;
height: 30px;
background-color: cadetblue;
margin-bottom: 10px;
}
這段程式選擇了 .box-1 內部的 .box-11 元素，並為其設置了樣式。
7. 相鄰兄弟選擇器（Adjacent Sibling Selector）
相鄰兄弟選擇器使用 + 來選擇某元素後面的第一個兄弟元素。這通常用於選擇某個元素直接後面的元素。
.box-1 + div {
background-color: cornflowerblue;
}
在這裡，.box-1 元素之後的第一個 div 元素會變成 cornflowerblue 顏色。
8. 一般兄弟選擇器（General Sibling Selector）
與相鄰兄弟選擇器類似，普通兄弟選擇器使用 ~，它選擇所有與指定元素擁有相同父元素的兄弟元素。
.box-1 ~ .box-4 {
background-color: rgb(62, 46, 35);
}
這段程式將會選擇 .box-1 之後的所有 .box-4 類別的兄弟元素，並設置其背景顏色。
9. 特定兄弟選擇器
如果你想選擇指定類型的兄弟元素，可以進一步指定其類別。
.box-1 ~ div.box-6 {
background-color: chartreuse;
}
這段程式將選擇所有與 .box-1 同級且具有 .box-6 類別的 div 元素，並改變其背景顏色。
10. 屬性選擇器（Attribute Selector）
屬性選擇器讓你根據元素的屬性來選擇元素，這對於需要根據元素的特定屬性來設置樣式的情況非常有用。
input[type="checkbox"] {
width: 300px;
height: 300px;
}
這段程式選擇所有 type="checkbox" 的 input 元素，並設置了其寬高。
小結：掌握 CSS 選擇器，提升開發效率
CSS 選擇器是設計網頁的基礎工具，它能讓你根據不同的需求選擇、定位 HTML 元素並應用樣式。無論是通用選擇器、標籤選擇器，還是進階的群組選擇器、兄弟選擇器，都能幫助你更加靈活地設計和控制頁面的布局和樣式。
掌握這些基本和進階的 CSS 選擇器，將讓你在前端開發中事半功倍，提升網站的可維護性和可讀性。接下來會介紹CSS動畫和漸變。
對於這類的撰寫方式習慣嗎?歡迎多多進行良性的知識交流喔!目前是在學習階段，大家有不同看法的話歡迎進行良性的知識交流!
大家可以考慮多多分享文章和考慮訂閱沙龍方案或贊助等喔!不過請注意不要違反著作權等行為。當然決定權都在於您，不會干涉您的任何決定。
提醒，文章僅供正當的知識參考，文章不負任何責任。
