CSS 選擇器屬性詳解：id，class 與屬性選擇器

CSS (Cascading Style Sheets) 是一種用於定義網頁樣式的標記語言，它定義了網頁佈局、顏色、字體和其他視覺效果。在 CSS 中，選擇器是一種用來定位和選擇要樣式化的 HTML 元素的模式。選擇器屬性包括 id、class 和屬性選擇器等，它們分別代表了不同的選擇方式。本文將詳細介紹這三個選擇器屬性，並提供具體的程式碼範例。

1. id 選擇器

id ​​選擇器透過給特定元素指定一個唯一的 id 屬性來選擇元素。 id 屬性的值必須在 HTML 文件中是唯一的。在 CSS 中，id 選擇器使用 # 符號加上 id 屬性的值來選擇元素。

例如，給一個<div> 元素新增id 屬性並使用id 選擇器來樣式化它：<pre class='brush:php;toolbar:false;'>&lt;div id=&quot;myDiv&quot;&gt;这是一个示例&lt;/div&gt;</pre><pre class='brush:php;toolbar:false;'>#myDiv { color: red; font-size: 16px; }</pre><p>上述程式碼示範了一個id 選擇器的範例。 id 選擇器 <code>#myDiv 會選擇具有 id 屬性值為 "myDiv" 的 <div> 元素，並將其文字顏色設為紅色，字體大小設為 16 像素。透過指定唯一的 id 屬性值，我們可以選擇並樣式化特定的元素。 <h2 id="class-選擇器">2. class 選擇器</h2> <p>class 選擇器透過給一個或多個元素指定相同的 class 名稱來選擇元素。在 CSS 中，class 選擇器使用 <code>. 符號加上 class 名稱來選擇元素。

例如，為兩個<p></p> 元素新增相同的class 名稱並使用class 選擇器來樣式化它們：

<p class="myClass">这是第一个段落</p>
<p class="myClass">这是第二个段落</p>

.myClass {
  background-color: yellow;
  padding: 10px;
}

上述程式碼示範了一個class選擇器的範例。 class 選擇器 .myClass 會選擇所有具有 class 名稱為 "myClass" 的元素，並將它們的背景顏色設為黃色，增加 10 像素的內邊距。透過指定相同的 class 名稱，我們可以選擇一組元素並統一樣式化它們。

3. 屬性選擇器

屬性選擇器透過選擇具有特定屬性或屬性值的元素來選擇元素。在 CSS 中，屬性選擇器使用方括號 [] 加上屬性名稱（可選：也可以新增屬性值）來選擇元素。

例如，選擇具有 title 屬性的 <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="CSS 選擇器屬性詳解：id，class 與屬性選擇器" > 元素：

<img src="/static/imghwm/default1.png"  data-src="image.jpg"  class="lazy" alt="图片" title="这是一个图片">

img[title] {
  border: 1px solid black;
}

上述程式碼示範了一個屬性選擇器的範例。屬性選擇器 img[title] 會選擇所有具有 title 屬性的 <img alt="CSS 選擇器屬性詳解：id，class 與屬性選擇器" > 元素，並為它們添加一個黑色的 1 像素邊框。我們也可以進一步指定特定的屬性值，如img[title="這是圖片"]，這樣就只會選擇title 屬性值為"這是圖片" 的 元素。

綜上所述，id、class 和屬性選擇器是三種常用的 CSS 選擇器屬性。透過合理地使用它們，我們可以選擇並樣式化網頁中的特定元素。希望本文提供的具體程式碼範例能幫助您更好地理解和使用這些選擇器屬性。如果您對 CSS 選擇器還有更多的疑問，您可以查閱相關文件或教學課程，以進一步深入學習和掌握。