CSS 选择器 .class

.class 选择器用于选取具有指定 class 属性的元素。它是一个非常常用的选择器，允许开发者对具有特定类名的 HTML 元素进行样式化。

定义与用法

.class 选择器可以应用于任何 HTML 元素，并且一个元素可以拥有多个类名。在 CSS 中，使用点符号（.）来定义类选择器。例如：

.myClass {
    color: red;
}

上述代码表示所有具有 myClass 类的元素的文本颜色都将变为红色。

实例

以下是一些使用 .class 选择器的实际例子：

示例 1: 单个类选择器

假设有一个 HTML 结构如下：

<p class="highlight">这是一个段落。</p>

我们可以使用以下 CSS 来改变这个段落的颜色：

.highlight {
    background-color: yellow;
}

这样，当浏览器加载这段代码时，段落的背景色将变为黄色。

示例 2: 多个类选择器

HTML:

<div class="container special">这是一个特殊的容器。</div>

CSS:

.container {
    border: 1px solid black;
}

.special {
    font-weight: bold;
}

在这种情况下，该 div 将同时具有边框和加粗的字体。

示例 3: 组合类选择器

有时，我们可能希望为多个元素应用相同的样式。这时可以使用组合类选择器：

HTML:

<h1 class="title">欢迎</h1>
<h2 class="title">了解更多</h2>

CSS:

.title {
    text-align: center;
}

这将使两个标题居中显示。

注意事项

• 类选择器不区分大小写。
• 在同一个元素上可以应用多个类名，只需在 HTML 中用空格分隔即可。
• 类选择器可以与 ID 选择器或标签选择器一起使用，以进一步细化样式规则。

与其他选择器的结合使用

类选择器可以与其他类型的选择器结合使用，以实现更复杂的选择和样式设置。例如：

div .special {
    color: blue;
}

这行代码表示所有带有 .special 类的元素，如果它们是 div 的后代，则它们的文本颜色将是蓝色。

总结

.class 选择器是前端开发中不可或缺的一部分。通过使用这种选择器，开发者能够更加灵活地控制页面上的各种元素，从而创建出更具视觉吸引力和功能性的网页。