CSS Class

类选择器 .class 用于选择属于特定 class 属性的元素。要通过特定类选择元素，我们可以使用 (.) 字符后跟相应类的名称。类名广泛用于为特定类设置 CSS 属性。

CSS 中的类允许您将不同的组件分组，并一次性将相同的样式应用于所有组件。

它们有助于将样式与结构分离，使我们能够设计可重用的样式，这些样式可以应用于网页中的多个元素。

注意：它确保类名不应以数字开头。

语法

为类定义样式

CSS 中的类选择器 (.class) 用于指定类的样式。类选择器前面有一个句点 (.) 和类名。

示例

我们可以在 CSS 规则中使用 .highlight 选择器来定义 "highlight" 类的样式。举例说明：

这段 CSS 代码将使具有 "highlight" 类的任何元素的文本加粗，并将背景色设置为黄色。

将类应用于元素

必须添加class 属性，并且其值必须设置为所需的类名才能将类应用于 HTML 元素。

例如，如果我们有一个名为 "highlight" 的类，我们可以使用以下语法将其应用于元素：

在此实例中，类名 "highlight" 将与段落元素关联。通过使用类为元素分配特定样式，您可以更有效地管理元素的外观。

应用多个类

通过在 HTML 元素的 'class' 属性中提供多个类名，您可以将多个类应用于该元素。因此，您可以混合不同的类的样式并一次性应用于单个元素。

在 class 属性值中用空格分隔类名，以同时应用多个类。

示例

当多个类应用于一个元素时，每个类中指定的样式将按其在 HTML 中出现的顺序应用。这会产生一种级联效应，其中来自多个类的样式可以相互支持或覆盖。

示例：假设我们有以下 CSS 规则：

如果应用了 class1 和 class2，元素将具有 class1 的红色文本颜色和 class2 的黄色背景颜色。通过组合这些类，可以实现更具个性化和美观的样式。

注意：如果多个类中定义了冲突的样式，则在 class 属性中后应用的类样式将优先。使用特定顺序的类可以快速覆盖或调整样式。

特异性与类选择器

当多个选择器针对同一元素时，特异性（CSS 的核心功能）决定了样式应用的顺序。它对于解决冲突和确保正确使用样式至关重要。

CSS 规则的特异性由其使用的选择器类型决定。与元素选择器和 ID 选择器相比，类选择器的特异性适中。

可以使用规则中使用选择器的数量和类型来计算特异性值。选择器的特异性值随着其变得更加精确而增加。下面提供了特异性层次结构的概述：

• 内联样式：最精确的样式是内联样式。样式属性用于直接将它们应用于特定的 HTML 组件。
• ID 选择器：与类选择器相比，ID 选择器更具体。它们根据 id 属性的值来定位元素。
• 类选择器：类选择器的特异性适中。根据 class 属性的值，它们定位特定的项目。
• 元素选择器：它们的特异性最低。它们根据 HTML 标签的名称来定位元素。

当为同一元素定义了两个具有不同选择器的样式时，特异性更高的样式将优先。

示例

HTML

CSS

在此实例中，.myClass 类选择器的特异性低于 #myId ID 选择器。因为 ID 选择器指定的样式具有优先权，所以 <p> 元素的文本颜色将是蓝色。

组合类选择器

CSS 的类选择器可以与其他选择器结合使用，以更精确地定位元素并将样式应用于大型结构中的特定元素。

组合类选择器时，使用空格分隔每个选择器。此空格表示应遵循具有两个类都已应用的元素的样式。

示例

在上面的示例中，父元素选择器 .parent-element 与类选择器 .class 用空格组合。此组合的目标是属于 "parent-element" 类元素的 "class" 类元素。只有那些特定的项目才会受到设定的样式规则的约束。

使用类覆盖样式

CSS 类可以用来修改或覆盖其他选择器定义的样式。以下是关键要点：

• 当不同的选择器为同一元素指定冲突样式时，如果类选择器的样式定义更明确或在 CSS 中后应用，则它可能具有优先权。
• 通过将类应用于具有冲突样式的元素，您可以选择性地覆盖特定特征，同时保持其他样式的完整性。
• 您可以通过在 HTML 或 CSS 中稍后应用类来覆盖先前应用的类所建立的样式。这使您无需更改默认或全局样式即可更改特定元素。的样式。
• 在使用 CSS 框架或提供 UI 组件预定义类的第三方库时，通过类覆盖样式可能很有益。通过添加新类或修改现有类，您可以使用这些类来调整样式。

示例

HTML

CSS

在此图中，.default 类将文本颜色设置为蓝色，但稍后添加的 .myClass 类会覆盖它，将文本颜色设置为红色。

重用类

您可以通过使用 CSS 强大的重用类概念将相同的样式应用于多个元素。

以下是需要理解的关键概念：

• 类在所有网页中都鼓励一致的编码实践。您可以只指定一个类并将其应用于许多元素，而不是为相关项创建单独的样式。
• 使用 class 属性将类名应用于所需的元素来重用类。
• 重用类使样式设置更轻松，并保证了统一的外观。所有应用了该类的元素将在该类的样式被修改后立即更新。
• 通过在多个元素上使用相同的类名，您可以建立外观上的一致性。所有元素都将共享为具有该类的类建立的一组样式。

示例

在此图的标题和段落元素中，都已分配了 "highlight" 类。因此，它们都使用了 .highlight CSS 选择器的样式。

注意：重用类将加快您的样式设置过程，减少代码重复，并保证所有方面的设计统一。

更新类的样式会自动更新在整个网页中应用了该类的所有组件，从而简化了维护。

CSS 框架和类

CSS 框架提供的预定义类可以一致有效地用于设置元素样式。

以下是 CSS 类和框架的突出特点：

• Bootstrap、Foundation 或 Tailwind CSS 等 CSS 框架提供了 CSS 规则、组件和样式表的集合，以加快 Web 开发速度并实现统一的设计。
• 框架高度依赖类来提供模块化和适应性强的样式方法。它们指定了精确的类名，您可以使用这些类名将预定义的样式应用于 HTML 组件。
• 您可以使用 CSS 框架中的预设类快速创建具有视觉吸引力的设计，而无需创建许多新的 CSS 代码。
• CSS 框架通常包含按钮、表单、导航菜单和网格等常用 UI 元素的类。这些类允许您应用统一的样式，并确保您的网站外观和感觉一致。
• 框架类通常使用命名约定来解释其功能，从而使其更容易理解和使用。例如，Bootstrap 类名 "btn btn-primary" 指定了具有主要样式的按钮组件。
• 此外，CSS 框架还提供实用程序和辅助类，它们提供了额外功能的和样式选项。这些类可用于文本对齐、响应式设计、布局修改等。

示例（使用 Bootstrap）

在此图的按钮元素中，被赋予了 Bootstrap 框架的 "btn" 和 "btn-primary" 类。因此，按钮现在具有 Bootstrap 为主要按钮定义的默认样式。

现在，让我们通过示例来理解整个概念

示例 1

示例