CSSseudo-Classes and Pseudo-Elements: An In-Depth Look

简介

嘿，了不起的人们。今天，我们将深入研究 css 中的伪类和伪元素的世界。这些是我们 css 工具包中的强大工具，可以帮助我们以独特的方式定位和设计元素，使我们的工作更加高效，使我们的网页更加动态。

我们将从基础知识开始，了解什么是伪类和伪元素以及如何使用它们。然后，我们将探讨您在编码之旅中会遇到的一些最常见的问题。不仅如此，我们还将查看大量编码示例，以了解这些概念的实际应用！

我们将进一步区分伪类和伪元素，突出它们的区别和相似之处。最后，我们将看到一些实际应用和最佳实践。

所以，喝杯咖啡（或茶），让我们开始吧！

立即学习“前端免费学习笔记（深入）”；

理解伪类

定义和用法

伪类是关键字，允许您根据元素的状态（例如：hover）或它们与其他元素的关系（例如：first-child）来选择元素并设置元素样式。它们以冒号为前缀，并添加到 css 中的选择器中。

常用伪类

以下是一些常用的伪类：

1. :hover - 当用户将鼠标悬停在某个元素上时选择该元素。

2. :active - 在激活状态下选择一个元素，例如当用户单击按钮时。

3. :first-child - 选择父元素中的第一个子元素。

4. :last-child - 选择父元素中的最后一个子元素。

5. :nth-child(n) - 选择父元素中的第 n 个子元素。

伪类的编码示例

初学者示例

以下是将鼠标悬停在链接上时更改链接颜色的方法：

a:hover { color: red;}

中间示例

此示例选择 ul 元素的第一个子元素并更改其颜色：

ul li:first-child { color: green;}

高级示例

在此示例中，我们使用 :nth-child(n) 伪类对表的奇数行和偶数行进行不同的样式：

tr:nth-child(even) { 
   background: #f2f2f2;
}

tr:nth-child(odd) { 
   background: #ddd;
}

请记住，伪类可以极大地增强您的 css 并使您的网页更加动态。在您的项目中练习使用它们，以适应它们的语法和行为。

继续阅读，我们将有更多现实世界的例子。

理解伪元素

定义和用法

伪元素是 css 中用于设置元素特定部分样式的关键字。它们以两个冒号为前缀并添加到选择器中。

常用伪元素

以下是一些常用的伪元素：

1. ::before - 在元素内容之前插入内容。

2. ::after - 在元素内容之后插入内容。

3. ::first-letter - 选择文本块的第一个字母。

4. ::first-line - 选择文本块的第一行。

5. ::selection - 将样式应用于用户突出显示的文档部分。

伪元素的编码示例

初学者示例

以下是在元素之前插入内容的方法：

p::before { content: "important: "; color: red;}

中间示例

此示例设置段落第一个字母的样式：

p::first-letter { font-size: 20px; color: blue;}

高级示例

在此示例中，我们更改用户选择的任何文本的背景颜色：

::selection { background: yellow;}

就像伪类一样，伪元素可以为您的网页添加很多活力。在您的项目中进行试验，以更好地了解它们的用法和影响。

伪类和伪元素之间的异同

伪类和伪元素都允许我们选择 html 的部分并设置其样式，而这些部分不一定可以通过传统选择器获得。然而，它们确实有一些关键的区别：

1. 前缀： 伪类以一个冒号 (:) 为前缀，而伪元素以两个冒号 (::) 为前缀。

2. 用途： 伪类主要用于定义元素的特殊状态，例如 :hover 或 :active。另一方面，伪元素用于设置元素的某些部分的样式，例如 ::before 或 ::after。

3. 实例数量：伪类可以在单个元素内多次使用，而伪元素只能使用一次。

尽管存在这些差异，伪类和伪元素都是 css 中必不可少的工具，可以使您的样式表更加动态和高效。

实际例子

示例 1：使用伪类创建具有悬停和活动状态的按钮

codepen 示例

在此示例中，我们使用 :hover 和 :active 伪类在用户将鼠标悬停在按钮上或单击按钮时更改按钮的背景颜色。这通过提供用户交互的视觉反馈来增强用户体验。

示例 2：使用 ::before 和 ::after 伪元素创建工具提示

codepen 示例

在此示例中，我们使用 ::before 伪元素创建一个工具提示，当用户将鼠标悬停在 .tooltip 元素上时会显示该工具提示。工具提示文本是使用 content 属性设置的，我们使用 :hover 伪类使工具提示在用户将鼠标悬停在元素上时可见。

示例 3：使用伪元素设置段落的第一个字母和第一行的样式

codepen 示例

在此示例中，我们使用 ::first-letter 和 ::first-line 伪元素来设置段落的第一个字母和第一行的样式。第一个字母的大小增加并呈红色，第一行加下划线并转换为大写。这可用于为您的文本内容添加强调或风格风格。

示例 4：使用伪类创建 3d 按钮效果

codepen 示例

在此示例中，我们使用 :active 伪类为按钮提供 3d 效果。按下按钮时，它会向下移动，产生深度错觉。

示例 5：使用伪元素创建打字机效果

codepen 示例

在此示例中，::before 伪元素用于插入文本“hello, world!”，::after 伪元素用于创建闪烁的光标。 @keyframes 规则用于逐渐改变 css 样式，创建打字动画。

要点和最佳实践

1. 伪类和伪元素是强大的工具：它们让我们可以根据元素的状态、与其他元素的关系或元素的特定部分来选择元素和设计元素的样式。

2. 前缀很重要：伪类使用单冒号前缀，而伪元素使用双冒号前缀。

3. 用例不同：伪类主要用于根据元素的状态或与其他元素的关系来设置元素的样式。另一方面，伪元素允许我们设置元素的特定部分的样式。

4. 熟能生巧：在项目中使用伪类和伪元素越多，您就会对它们的语法和行为越熟悉。

5. 增强用户体验：伪类和伪元素可以通过提供视觉提示和反馈来极大地增强用户体验。

结论

伪类和伪元素是 css 中非常宝贵的工具。它们使我们能够超越传统选择器的限制，并以独特和动态的方式设计我们的网页。通过了解它们的差异以及何时以及如何使用它们，我们可以创建更具交互性和吸引力的用户界面。

继续尝试它们，看看它们如何增强您的下一个项目！

---

? 大家好，我是 eleftheria，社区经理， 开发人员、公共演讲者和内容创建者。

?如果您喜欢这篇文章，请考虑分享。

? 所有链接 | x | 领英

以上就是CSSseudo-Classes and Pseudo-Elements: An In-Depth Look的详细内容，更多请关注其它相关文章！