关于 CSS 伪类和元素及其用例的所有内容

在CSS中，Pseduo类和元素是添加到选择器的关键字，允许您根据其状态或元素的特定部分来设置样式和元素。

例如：您将鼠标悬停在锚元素上，或者添加不同的样式来查看链接是否被访问，或者您可以使用定位文章中单词的第一个字母。使用这些关键字可以实现更多目标。

它们在主要浏览器中得到广泛支持，并且自早期版本以来一直是 CSS 的一部分。

什么是伪类？

伪类就像创建一个基于特定条件或状态应用于元素的规则。

当元素的状态由于用户与其交互的方式而发生变化时，将使用伪类。例如：

• 当有人将鼠标悬停在按钮上时 (:hover)
• 选择表单字段进行输入时 (:focus)
• 当元素是列表中的第一个或最后一个子元素时

让我们通过一个例子来理解：

a:hover {
  color: blue; 
}

a:visited {
  color: navyblue;
}

此示例显示了锚元素的两种不同状态。当用户将鼠标悬停在锚点元素上时，文本颜色会变为蓝色，但如果用户已经通过单击该锚点元素访问过，则显示不同的默认颜色。

伪类可以用关键字名称开头的单个冒号 : 表示。以下是一些常见伪类的列表：

• 悬停 – 当用户悬停时（将鼠标放在元素上）
• :focus – 当用户选择一个字段（如表单中的文本框）
• :nth-child(n) – 当您想要设置列表或网格中特定项目的样式时。
• :disabled – 当某个元素（如按钮）被禁用且无法单击时。

什么是伪元素？

伪元素与伪类不同，因为它们针对元素的特定部分而不是整个元素。它允许您设置样式或将内容插入到通常无法直接访问的元素的特定部分中。

伪元素示例：

p::first-letter {      /* Accessing the first-letter of paragraph and adding style. */
  font-size: 2em; 
  font-weight: bold; 
  color: red;
}

此示例展示了如何访问段落的第一个字母并使用 CSS 应用我们的样式。

您可能已经注意到一件事，即使用双 :: 冒号用于伪元素，而 : 冒号用于伪类。这是两者语法的实际表示。

为什么是伪类和伪元素？

这些工具让我们可以在 CSS 中做一些非常酷的事情，而无需编写一堆额外的 HTML 或 JavaScript。它们可以更好地控制您的设计，只需几行 CSS 即可使您的网站更具交互性和动态性。

以下是如何区分它们的方法，并帮助您选择正确的工具：

• 伪类有助于创建交互，例如悬停效果、聚焦输入字段或基于列表位置的样式。
• 伪元素允许对元素的特定部分进行样式设置或在元素之前或之后添加装饰内容，例如图标、符号。

浏览器支持

所有主要浏览器都支持伪元素和伪类，但随着网络的发展，添加的新关键字不提供默认支持。因此，我们需要使用浏览器前缀来解决这些问题。

例如，旧版浏览器不支持像 :not() 这样的新伪类，因此它的行为有所不同。您应该始终使用在线工具 Caniuse.com

结论

在 CSS 中，伪类和伪元素是您设计网站的秘密武器，无需添加大量额外代码即可感觉生动且美观。它们帮助您根据交互或状态（伪类）设置元素的样式，或针对元素的特定部分（伪元素）。

本博客最初发布于Programmingly.dev 网站。点击此链接阅读全文

以上是关于 CSS 伪类和元素及其用例的所有内容的详细内容。更多信息请关注PHP中文网其他相关文章！