CSS中class的样式赋值方法详解

作者：System 时间：2024年08月12日分类：所有,css 字数：729

在CSS中，我们可以通过两种方式为class赋予样式：

以下是两种方式的示例代码：

方法一：直接在HTML标签的class属性中写入class名称，然后在CSS中定义该class的样式。

HTML代码：




<div class="example">Hello, world!</div>

CSS代码：




.example {
    color: red;
}

在这个例子中，我们在HTML中的div标签上设置了class属性为"example"，然后在CSS中定义了一个名为".example"的class，并为其设置了颜色为红色。

方法二：使用CSS选择器为HTML元素的class属性值定义样式。

HTML代码：




<div class="example">Hello, world!</div>

CSS代码：




div.example {
    color: blue;
}

在这个例子中，我们使用了CSS选择器"div.example"，这表示我们只为div标签中class属性值为"example"的元素设置样式。这个元素的文本颜色被设置为蓝色。

注意：在CSS中，class选择器以"."开头，而元素选择器与class选择器结合使用时，则以元素标签名开头，后跟一个"."和class名称，中间没有空格。