CSS伪类是什么-古蔺大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

CSS伪类是什么

这篇“CSS伪类是什么”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“CSS伪类是什么”文章吧。

创新互联为客户提供专业的成都网站建设、做网站、程序、域名、空间一条龙服务，提供基于WEB的系统开发. 服务项目涵盖了网页设计、网站程序开发、WEB系统开发、微信二次开发、手机网站制作设计等网站方面业务。

什么是伪类？

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

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

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

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

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

伪类的目的

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

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

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

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

[...]

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

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

2、访问的链接

3、一个全屏的元素。

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

item1

item2

item3

item4

我们可以使用以下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

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

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

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

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