CSS 選擇器屬性指南：id，class 與屬性選擇器

CSS 選擇器屬性指南：id，class 和屬性選擇器

CSS（層疊樣式表）是用來描述網頁上的元素如何被渲染和佈局的一種語言。在 CSS 中，選擇器用來選擇具體的 HTML 元素，然後套用樣式規則。

本文將重點放在三種常見的選擇器屬性：id，class 和屬性選擇器，並提供具體的程式碼範例。

1. id ​​選擇器

id ​​選擇器用於選擇具有特定 id 屬性的元素，id 屬性需要在 HTML 中唯一。在 CSS 中，id 選擇器的語法是在選擇器名字前加上 # 符號。下面是一個例子：

<div id="header">这是网页的页眉</div>

#header {
  background-color: blue;
  color: white;
}

上面的程式碼表示一個 id 為 "header" 的 div 元素，它的背景顏色為藍色，文字顏色為白色。

2. class 選擇器

class 選擇器用於選擇具有特定class 屬性的元素，一個元素可以有多個class 屬性，並且多個元素可以共用同一個class 屬性。在 CSS 中，class 選擇器的語法是在選擇器名稱前加上 . 符號。下面是一個例子：

<p class="highlight">这是一个高亮的段落</p>

.highlight {
  background-color: yellow;
  font-weight: bold;
}

上面的程式碼表示一個 class 為 "highlight" 的 p 元素，它的背景顏色為黃色，文字加粗。

3. 屬性選擇器

屬性選擇器用於選擇具有特定屬性的元素，可以根據屬性值來進行選擇。在 CSS 中，屬性選擇器的語法有多種形式。以下是幾個例子：

• 選擇具有特定屬性的元素：

<a href="#">这是一个链接</a>

a[href] {
  color: blue;
}

上面的程式碼表示選擇所有具有href 屬性的a 元素，將它們的文字顏色設定為藍色。

• 選擇具有特定屬性和屬性值的元素：

<input type="text" value="请输入用户名">

input[type="text"] {
  width: 200px;
}

上面的程式碼表示選擇所有type 屬性為"text" 的input 元素，將它們的寬度設置為200px。

• 選擇具有特定屬性值開頭的元素：

<img src="images/logo.png" alt="Logo">
<img src="images/banner.jpg" alt="Banner">

img[src^="images/"] {
  border: 1px solid gray;
}

上面的程式碼表示選擇所有src 屬性值以"images/" 開頭的img 元素，為它們添加一個灰色的邊框。

總結：

透過使用 id，class 和屬性選擇器，我們可以更精確地選擇網頁上的元素，並對它們套用特定的樣式。在實際開發中，靈活運用這些選擇器，可以提高 CSS 的重複使用性和可維護性。

以上是 CSS 選擇器屬性指南的簡單介紹，並提供了對應的程式碼範例。希望對大家理解和使用 CSS 選擇器有幫助！

以上是CSS 選擇器屬性指南：id，class 與屬性選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章！