IT課程 CSS基礎 020_選擇器
選擇器
選擇器用於選擇文檔中需要樣式化的元素，通過不同的選擇模式，告訴瀏覽器哪些元素應用哪些樣式。
ID選擇器（#）
通過元素的唯一ID來選擇元素。ID選擇器應該確保在文檔中是唯一的，不應重複使用相同的ID。
示例：
#myID { /* 樣式規則 */}類選擇器（.）
通過元素的類名選擇元素。類選擇器可以用於多個元素，同一個元素可以擁有多個類。
示例：
.myClass { /* 樣式規則 */}元素選擇器（p、h1）
通過HTML元素的名稱選擇元素。元素選擇器會選擇文檔中所有匹配的元素。
示例：
p { /* 樣式規則 */}通用選擇器（*）
選擇文檔中的所有元素。通用選擇器應該謹慎使用，因為會匹配所有元素，影響性能。
示例：
* { /* 樣式規則 */}屬性選擇器（[type="text"]）
通過元素的屬性值選擇元素。屬性選擇器可以根據屬性值的不同選擇元素。
示例：
input[type="text"] { /* 樣式規則 */}偽類選擇器
選擇元素的特殊狀態或位置。偽類選擇器用於選擇元素的交互狀態，如懸停、訪問等。
示例：
a:hover { /* 樣式規則 */}偽元素選擇器
選擇元素的特殊部分。偽元素選擇器用於選擇元素的虛擬部分，如首行、首字母等。
示例：
p::first-line { /* 樣式規則 */}子元素選擇器
選擇某個元素的直接子元素。子元素選擇器只選擇直接子元素，不包括後代。
示例：
ul > li { /* 樣式規則 */}通用兄弟選擇器
選擇和指定元素有相同父元素的所有兄弟元素。通用兄弟選擇器用於選擇所有在指定元素後面的兄弟元素，不要求緊鄰。
示例：
h2 ~ p { /* 樣式規則 */}相鄰兄弟選擇器
選擇緊接在指定元素後面的兄弟元素。相鄰兄弟選擇器用於選擇緊接在指定元素後面的兄弟元素。
示例：
h2 + p { /* 樣式規則 */}後代選擇器
選擇某個元素下的所有後代元素。後代選擇器會選擇指定元素下的所有後代，包括嵌套層次深的元素。
示例：
div p { /* 樣式規則 */}並集選擇器（,）
將多個選擇器組合在一起，選擇所有匹配任一選擇器的元素。並集選擇器用於同時選擇多個不同類型的元素，並應用相同的樣式規則。
示例：
h1, h2, h3 { /* 樣式規則 */}選擇器列表
將多個選擇器按照優先級順序列舉，選擇最匹配的一個。選擇器列表允許按照不同的選擇器組合選擇多個元素，以滿足不同條件的樣式需求。
示例：
div p,.myClass,#myID { /* 樣式規則 */}選擇器命名規則
選擇器的名稱必須是字母數字、下劃線或連字符組成的字符串。
選擇器的名稱必須以字母或下劃線開頭。
選擇器的名稱不能以數字開頭。
選擇器的名稱不能包含空格。
建議：
使用有意義的名字： 選擇器的名字應該能夠清晰地反映出所選擇元素的作用或用途。
遵循命名約定： 使用一致的命名約定，如駝峰式命名或短橫線連接命名，以提高代碼的一致性。
避免使用無意義的縮寫： 避免使用過於簡短或無意義的縮寫，使得其他開發者也能理解選擇器的含義。
遵循語義化： 使用具有語義化的選擇器，以提高代碼的可讀性和維護性。