CSS伪类是什么？CSS伪类的详细介绍-css教程-PHP中文网

无论您是初学者还是经验丰富的CSS开发人员，您都可能听说过伪类。最着名的伪类可能是:hover，当指针设备（例如鼠标）指向它时，它允许我们在处于悬停状态时对元素进行样式化。

按照我们之前关于margin：auto和CSS Floats的内容介绍，我们在这篇文章中对伪类进行了更深入的研究。我们将看到什么是伪类，它们是如何工作的，我们如何对它们进行分类，以及它们与伪元素的区别。（推荐教程：css视频教程）

什么是伪类？

一个伪类是我们可以为了增加CSS选择一个关键字定义一个特殊状态的属于HTML元素。我们可以使用冒号语法将伪类添加到CSS选择器，:如下所示：a:hover{ ... }

一个CSS类是我们可以添加到HTML我们想申请，同一款式的规则元素，例如顶部菜单项或侧边栏小工具的标题属性。换句话说，我们可以使用CSS类对以某种方式相似的HTML元素进行分组或分类。

伪类与它们类似，因为它们也用于将样式规则添加到共享相同特征的元素。

但是，虽然真正的类是用户定义的并且可以在源代码中被发现，但是例如，基于所属的HTML元素的当前状态，UA（用户代理）（例如web浏览器）添加

伪类。

伪类和伪元素可以在CSS选择器中使用，但在HTML源代码中不存在。相反，它们在某些条件下由UA“插入”以用于在样式表中寻址。

伪类的目的

常规CSS类的工作是对元素进行分类或分组。开发人员知道他们的元素是如何分组的：他们可以形成类似“菜单项”，“按钮”，“缩略图”等的类来分组，以及后来的类似元素的样式。这些分类基于开发人员自己给出的元素特征。

例如，如果开发者决定使用a

作为缩略图对象，则可以使用

“缩略图”类对其进行分类。

<div class="thumbnail">[...]</div>

登录后复制

然而，HTML元素具有基于其状态，位置，性质以及与页面和用户的交互的共同特征。这些是HTML代码中通常不标记的特征，但我们可以使用 CSS中的伪类来定位它们，例如：

1、一个元素，它是其父元素中的最后一个子元素

2、访问的链接

3、一个全屏的元素。

这些是伪类通常所针对的特征。为了更好地理解类和伪类之间的区别，我们假设我们使用该类.last来标识不同父容器中的最后一个元素。

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li class="last">item 4</li>
</ul>
 
<select>
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
    <option class="last">option 4</option>
</select>

登录后复制

我们可以使用以下CSS设置这些最后一个子元素的样式：

li.last {
  text-transform: uppercase;
}
 
option.last{
  font-style:italic;
}

登录后复制

但是当最后一个元素改变时会发生什么？好吧，我们必须将.last类从前一个元素移动到当前元素。

更新类的麻烦可以留给用户代理，至少对于元素中常见的那些特征（并且最后一个元素是它可以获得的常见元素）。拥有预定义的:last-child伪类确实非常有用。这样，我们不必指示 HTML代码中的最后一个元素，但我们仍然可以使用以下CSS来设置它们的样式：

li:last-child {
  text-transform: uppercase;
}
 
option:last-child {
    font-style:italic;
}

登录后复制

伪类的主要类型

伪类有很多种，它们都为我们提供了基于其特征无法访问或难以访问的特征来定位元素的方法。这是MDN 中标准伪类的列表。

1.动态伪类

动态伪类根据它们为响应用户的交互而转换的状态动态地添加到HTML元素和从HTML元素中删除。一些的动态伪类的例子是，，，和，所有这些都可以被添加到锚定标记。:hover:focus:link:visited

a:visited{
  color: #8D20AE;
}
.button:hover,
.button:focus{
  font-weight: bold;
}

登录后复制

2.基于状态的伪类

基于状态的伪类在处于特定静态时添加到元素中。其中一些最着名的例子是：

:checked可以应用于复选框（）

:fullscreen 定位当前以全屏模式显示的任何元素

:disabledHTML元素，可以是在已禁用模式，例如，