如何正確使用CSS選擇器
CSS（Cascading Style Sheets）選擇器是一種用于選擇HTML元素并為其應用樣式的重要工具。正確使用CSS選擇器可以使我們的網頁樣式更加精確和靈活。下面將詳細介紹如何正確使用CSS選擇器，并提供具體的代碼示例。
一、基本選擇器
- 元素選擇器：通過選擇HTML元素的標簽名來應用樣式。例如，要為所有的段落（p）元素設置字體顏色為紅色：
p {
color: red;
}
登錄后復制
- 類選擇器：通過選擇HTML元素的類名來應用樣式。類選擇器以英文句點（.）開頭，后面跟著類名。例如，要為所有類名為“intro”的元素設置背景顏色為黃色：
.intro {
background-color: yellow;
}
登錄后復制
- ID選擇器：通過選擇HTML元素的ID來應用樣式。ID選擇器以井號（#）開頭，后面跟著ID名。例如，要為ID名為“logo”的元素設置寬度為200像素：
#logo {
width: 200px;
}
登錄后復制
二、組合選擇器
- 子選擇器（child selector）：通過選擇元素的子元素來應用樣式。子選擇器使用大于號（>）。例如，要為所有article元素下的p元素設置字體大小為14像素：
article > p {
font-size: 14px;
}
登錄后復制
- 后代選擇器（descendant selector）：通過選擇元素的后代元素來應用樣式。后代選擇器使用空格。例如，要為所有父級元素class為”section”下的p元素設置字體顏色為綠色：
.section p {
color: green;
}
登錄后復制
- 相鄰兄弟選擇器（adjacent sibling selector）：通過選擇與元素相鄰的兄弟元素來應用樣式。相鄰兄弟選擇器使用加號（+）。例如，要為所有ID為”header”之后出現的p元素設置字體粗體：
#header + p {
font-weight: bold;
}
登錄后復制
- 通用兄弟選擇器（general sibling selector）：通過選擇與元素為兄弟關系的所有元素來應用樣式。通用兄弟選擇器使用波浪號（~）。例如，要為所有ID為”sidebar”之后出現的div元素設置邊框為1像素實線：
#sidebar ~ div {
border: 1px solid;
}
登錄后復制
三、屬性選擇器
- [attribute]屬性選擇器：通過選擇具有指定屬性的元素來應用樣式。例如，要為所有具有href屬性的a元素設置文本裝飾下劃線：
a[href] {
text-decoration: underline;
}
登錄后復制
- [attribute=value]屬性選擇器：通過選擇具有指定屬性和屬性值的元素來應用樣式。例如，要為所有a元素的target屬性值為”_blank”的元素設置字體顏色為藍色：
a[target="_blank"] {
color: blue;
}
登錄后復制
- [attribute^=value]屬性選擇器：通過選擇具有以指定值開頭的屬性值的元素來應用樣式。例如，要為所有href屬性值以”http”開頭的a元素設置字體顏色為紅色：
a[href^="http"] {
color: red;
}
登錄后復制
四、偽類選擇器
偽類選擇器可以選擇元素的特殊狀態或位置。常見的偽類選擇器有:hover、:active、:focus等，用于選擇鼠標懸停、被激活、獲取焦點等狀態的元素。以下是一些常見的偽類選擇器示例：
- :hover偽類選擇器：選擇鼠標懸停在元素上的狀態。例如，要為所有鏈接在鼠標懸停時改變顏色：
a:hover {
color: purple;
}
登錄后復制
- :nth-child(n)偽類選擇器：選擇元素的第n個子元素。例如，要為列表中偶數行的元素設置背景顏色：
li:nth-child(even) {
background-color: lightgray;
}
登錄后復制
以上是一些CSS選擇器的基本用法和示例，希望能夠幫助讀者更好地理解和應用CSS選擇器，實現精確而靈活的樣式控制，為網頁設計提供更多可能性。
