使用CSS選擇器的正確方法

如何正確使用CSS選擇器

CSS（Cascading Style Sheets）選擇器是一種用於選擇HTML元素並為其應用樣式的重要工具。正確使用CSS選擇器可以使我們的網頁樣式更加精確和靈活。以下將詳細介紹如何正確使用CSS選擇器，並提供具體的程式碼範例。

一、基本選擇器

1. 元素選擇器：透過選擇HTML元素的標籤名稱來套用樣式。例如，要為所有的段落（p）元素設定字體顏色為紅色：

p {
  color: red;
}

2. #類別選擇器：透過選擇HTML元素的類別名稱來套用樣式。類別選擇器以英文句點（.）開頭，後面跟著類別名稱。例如，要為所有類別名為「intro」的元素設定背景顏色為黃色：

.intro {
  background-color: yellow;
}

3. ID選擇器：透過選擇HTML元素的ID來套用樣式。 ID選擇器以井號（#）開頭，後面跟著ID名稱。例如，要為ID名為「logo」的元素設定寬度為200像素：

#logo {
  width: 200px;
}

二、組合選擇器

1. 子選擇器（child selector）：透過選擇元素的子元素來套用樣式。子選擇器使用大於號（>）。例如，要為所有article元素下的p元素設定字體大小為14像素：

article > p {
  font-size: 14px;
}

2. 後代選擇器（descendant selector）：透過選擇元素的後代元素來套用樣式。後代選擇器使用空格。例如，要為所有父級元素class為"section"下的p元素設定字體顏色為綠色：

.section p {
  color: green;
}

3. 相鄰兄弟選擇器（adjacent sibling selector）：透過選擇與元素相鄰的兄弟元素來套用樣式。鄰近兄弟選擇器使用加號（ ）。例如，要為所有ID為"header"之後出現的p元素設定字體粗體：

#header + p {
  font-weight: bold;
}

4. 通用兄弟選擇器（general sibling selector）：透過選擇與元素為兄弟關係的所有元素來套用樣式。通用兄弟選擇器使用波浪號（~）。例如，要為所有ID為"sidebar"之後出現的div元素設定邊框為1像素實線：

#sidebar ~ div {
  border: 1px solid;
}

三、屬性選擇器

1. [attribute]屬性選擇器：透過選擇具有指定屬性的元素來套用樣式。例如，要為所有具有href屬性的a元素設定文字裝飾下劃線：

a[href] {
  text-decoration: underline;
}

2. #[attribute=value]屬性選擇器：透過選擇具有指定屬性和屬性值的元素來套用樣式。例如，要為所有a元素的target屬性值為"_blank"的元素設定字體顏色為藍色：

a[target="_blank"] {
  color: blue;
}

3. #[attribute^=value]屬性選擇器：透過選擇具有以指定值開頭的屬性值的元素來套用樣式。例如，要為所有href屬性值以"http"開頭的a元素設定字體顏色為紅色：

a[href^="http"] {
  color: red;
}

四、偽類選擇器

偽類選擇器可以選擇元素的特殊狀態或位置。常見的偽類選擇器有:hover、:active、:focus等，用來選擇滑鼠懸停、被啟動、取得焦點等狀態的元素。以下是一些常見的偽類別選擇器範例：

1. :hover偽類別選擇器：選擇滑鼠懸停在元素上的狀態。例如，要為所有連結在滑鼠懸停時改變顏色：

a:hover {
  color: purple;
}

2. :nth-child(n)偽類別選擇器：選擇元素的第n個子元素。例如，要為清單中偶數行的元素設定背景顏色：

li:nth-child(even) {
  background-color: lightgray;
}

以上是一些CSS選擇器的基本用法和範例，希望能夠幫助讀者更好地理解和應用CSS選擇器，實現精確且靈活的樣式控制，為網頁設計提供更多可能性。

以上是使用CSS選擇器的正確方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！