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;
}

技术细节

浏览器支持