CSS .class 選擇器

定義和用法

CSS .class 選擇器用于選擇具有特定 class 屬性值的元素。

要選擇具有特定 class 的所有類型的元素，請寫一個句點 (.) 字符，后跟 class 屬性值。

element.class 選擇器用于選擇具有特定 class 屬性值的指定元素。

要僅選擇具有特定 class 的一種類型的元素，請寫元素名稱，然后是一個句點 (.) 字符，后跟 class 屬性值（參見下面的例子 2）。

提示：HTML 元素還可以引用多個 class（參見下面的例子 3）。

實例

例子 1

選擇并設置所有 class="intro" 的元素的樣式：

.intro {
  background-color: yellow;
}

親自試一試

例子 2

選擇并設置所有 class="intro" 的 <p> 元素的樣式：

p.intro {
  background-color: yellow;
}

親自試一試

例子 3

.class 選擇器的不同用法：

/* 選擇所有 class="center" 的元素 */
.center {
  text-align: center;
}
/* 選擇所有 class="large" 的 <p> 元素 */
p.large {
  font-size: 200%;
}
/* 選擇所有 class 列表中包含 "fancy" 和 "beige" 的 <p> 元素 */
p.fancy.beige {
  font-family: 'Courier New', monospace;
  background-color: beige;
  border: 2px solid green;
}
/* 選擇 class="ex1" 的 <p> 元素內所有 class="ex2" 的元素 */
p.ex1 .ex2 {
  background-color: yellow;
}

親自試一試

CSS 語法

.class {
  css declarations;
}

CSS 語法

element.class {
  css declarations;
}

技術細節

瀏覽器支持