给元素一个类

类是它们被分配给的元素的标识符。使用 class 属性将类分配给元素。

<div class="example-class"></div>

要为元素分配多个类，请使用空格分隔类名。

<div class="class1 class2"></div>

在 CSS 中使用类

类可用于设置某些元素的样式，而无需更改该类的所有元素。例如，这两个 span 元素可以具有完全不同的样式：

<span></span>
<span class="special"></span>

可以为页面上的任意数量的元素提供相同名称的类，并且它们都将接收与该类关联的样式。除非你在 CSS 中指定元素，否则这将始终为 true。

例如，我们有两个元素，都是 highlight 类：

<div class="highlight">Lorem ipsum</div>
<span class="highlight">Lorem ipsum</span>

如果我们的 CSS 如下所示，那么绿色将应用于两个元素中的文本：

.highlight { color: green; }

但是，如果我们只想用 highlight 定义 div，那么我们可以添加如下特性：

div.highlight { color: green; }

然而，当使用 CSS 进行样式化时，通常建议仅使用类（例如 .highlight）而不是使用类的元素（例如 div.highlight）。

与任何其他选择器一样，类可以嵌套：

.main .highlight { color: red; } /* Descendant combinator */ 
.footer > .highlight { color: blue; } /* Child combinator */ 

你还可以将类选择器链接到仅选择具有多个类组合的元素。例如，如果这是我们的 HTML：

<div class="special left menu">This text will be pink</div>

我们想要将这段特定的文本粉红色，我们可以在 CSS 中执行以下操作：

.special.left.menu { color: pink; }