CSS Class Selector

HTML 元素使用 CSS 选择器进行选择，以便可以对其应用 CSS 样式。HTML 元素的类名作为属性在 HTML 标签中提供，CSS 中的类选择器用于根据这些类名选择 HTML 组件。任何以点 (.) 结尾的字符串值（如 .class）都可以在 HTML 中用作类名，并通过在 HTML 元素中使用 class 属性来创建。

使用类选择器将选择具有该特定类的所有项目，这一点很重要，因为多个组件可能具有相同的类属性。

CSS 类选择器 (".class") 有哪些功能？

1. 在 CSS 中，类属性用于使用类选择器来样式项目。
2. 在 CSS 中，类选择器选择属于指定类的 HTML 元素，并对其应用适当的样式。
3. 类选择器根据为元素提供的类名向元素添加特定样式。
4. 在 CSS 中，类选择器可以同时选择具有相同类名的多个项目并应用相同的样式。

语法

HTML 元素的 class 属性可以使用以下语法声明类

CSS 中的以下语法可用于选择前面提到的类

建立 CSS 类

在 HTML 元素标签中使用 class 属性可以在 HTML 中构建一个 CSS 类。任何包含大写或小写字母、数字、连字符和下划线的字符串值都可以用作类名。CSS 类名中不能包含空格。除了在类选择器中使用外，类名还可以由 JS 用于修改 HTML 元素。以下示例演示了如何向任何 HTML 元素添加类名

一个带有类名“division”的 <div> 元素和一个带有类名“anchor”的 <a> 标签构成了前面的示例。

CSS 类可以包含元素吗？

在 HTML 中，单个元素可以包含许多类名，每个类名用空格分隔。这很有利，因为使用多个类名可以为项目提供更高的特异性。例如

一个带有类名 "another" 和 "division" 的 <div> 元素以及一个带有类名 "another" 和 "anchor" 的 <a> 标签构成了上面的示例。

使用 CSS 类选择器

在 CSS 中，类选择器可以直接与类名一起使用，如下例所示

上面的 HTML 中描述了两个 div 元素和两个 p 元素。一个 div 元素的类设置为“Main”。在 main 中，两个 div 元素和一个 p 元素都将类设置为 child。

通过使用以下 CSS，我们可以更改组件的背景和边框颜色。为了可见性，我们还添加了外边距和内边距。

输出

如您所见，每个选定的项目都使用前面提到的技术进行了样式设置。.child 选择器选择了 div 和 p 元素，并对其应用了相同的样式。

伪类

在 CSS 中，伪类用于指定 HTML 组件的特定状态。对于 HTML 组件的各种状态，伪类提供附加功能。利用适当的伪类，可以提供诸如已访问链接、活动链接、鼠标悬停项、第一个子元素、最后一个子元素、第 n 个子元素等状态。以下语法可用于组合伪类和 CSS 选择器

虽然有很多 CSS 伪类，但我们将在本文中讨论一些更流行的伪类。以下列表是最流行的 CSS 类

1. :active
2. :hover
3. :link
4. :visited
5. :lang
6. :focus
7. :first-child

:hover 伪类

当我们的鼠标光标悬停在元素上时，此伪类会为其添加特定效果。下图显示了当我们的鼠标到达框区域时文本颜色如何从黑色变为粉色和黄色。

示例：此示例显示了 hover CSS 伪类。

输出

:active 伪类

此伪类用于标识当用户单击时变为活动的元素。以下示例显示了单击文本时文本颜色会短暂更改。

示例：此示例显示了 CSS active 伪类。

输出

:focus 伪类

此伪类用于选择用户当前正在聚焦的元素。当用户单击表单中使用的用户输入项之一时，将调用该脚本。以下示例中当前处于焦点状态的输入字段的背景颜色会更改。

示例：此示例显示了 CSS focus 伪类。

输出

:visited 伪类

已访问伪类用于选择用户已查看的 URL。在下面的示例中，当链接被单击时，其颜色会更改。

示例：此 CSS 示例显示了 visited 伪类。

输出

使用 :lang 选择器可根据语言特性将元素定位到特定值。此选择器使用语言代码来起作用。

语法

语言代码

• en: 用于英语。
• hi: 用于印地语。
• fr: 用于法语。
• de: 用于德语
• it: 用于意大利语
• ca: 用于加拿大语

示例

输出

:first-child 伪类

在 CSS 中，first-child 伪类是相关组件集合中的第一个元素。要样式化其父元素的 first-child 元素，请使用 :first-child 选择器。

语法

示例

输出