CSS 类选择器Class Selector


在CSS文件中使用类选择器将样式应用于具有相应类名的HTML元素。在HTML中,您可以通过添加“class”属性来设置任何元素的类名。

要选择具有特定类的元素,我们使用名为句点字符的(。)和类的名称。

例如 。center { text-align:center; red; }

这里,所有class="center" HTML元素都是红色和居中对齐的。

例子:

<h1 class="test">This is a heading 1</h1>
<p class="test">This is a paragraph 1</p>
<h2 class="test">This is a heading 2</h2>
<p class="test">This is a paragraph 2</p>
<div class="test2 test3">This is a div 1</div>

由于类名不是唯一的,因此HTML类属性可以为具有相同类名的元素定义相同的样式。 以下是如何在CSS文件中选择类来设置元素样式(注意。符号):

test所有元素都将应用于此样式:

.test {
  color: green;
}

test所有<p>元素都将应用于此样式:

p.test {
  border: 1px solid black;
  color: red;
 }

test所有<h1><h2>元素都将应用此样式:

h1.test, h2.test {
  color: blue;
 }

具有类test2test3所有元素都将应用此样式:

.test2.test3 {
  color: green;
 }

提示:多个类之间没有空格。

更多CSS教程

学习更多CSS教程