# 掌握 HTML5 伪类与伪元素的入门指南
作为一名开发者，了解 HTML5 的伪类和伪元素是设计高效网页的重要基础。伪类和伪元素使我们能够选择和样式化文档中的某些部分而不需要额外的 HTML 元素。这篇文章将逐步引导你如何使用这些强大的功能。
## 伪类和伪元素的概念
### 伪类
伪类用于指定元素的特定状态。例如，当鼠标悬停在链接上时，可以使用 `:hover` 伪类来改变链接的样式。
CSS的元素选择器除了根据id（#）、class（.）、属性（[ ]）选取元素以外，还有很重要的一类，就是根据元素的特殊状态来选取元素。它们就是伪类和伪元素。跟id选择器、类选择器、属性选择器以及派生选择器等等这些从HTML文档层次结构（DOM树）中获取元素不同的是，伪类和伪元素是预定义的、独立于文档元素的。它们获取元素的途径也不是基于id、class、属性这些基础的元素特征，而是在处于特殊状态的
转载
2023-09-26 22:51:43
107阅读
一、伪元素是在标签之内添加内容，不是添加一个兄弟元素，css3中规定伪元素用两个冒号，伪类用一个冒号。获取伪元素内容的方法：getComputedStyle("p"，“:after”).content或者getComputedStyle("p"，“:after”).getPropertyValue("content")，两者的区别是getPropertyValue遇到带短横线的属性名时可以直接使用
转载
2023-07-14 21:01:10
116阅读
什么是伪类：伪类用于定义元素的特殊状态。例如，它可用于：当用户将鼠标悬停在元素上时为其设置样式样式访问和未访问的链接不同在获得焦点时设置元素的样式伪类的用法：伪类：{  
转载
2023-07-07 11:53:21
106阅读
CSS 伪类、伪元素伪类 (pseudo-classes)动态伪类 (dynamic pseudo-classes):link、:visited、:hover、:active:focus目标伪类 :target语言伪类 :lang元素状态伪类 :enable、:disable、:checked结构伪类 (structural pseudo-classes):nth-child()、:nth-la
什么?伪元素?之前不是说了伪类吗，怎么又跑出来一个伪元素吗?它们不是一样的吗?呵呵，其实伪类和伪元素是两个不同的概念，今天小编就为大家介绍一下伪元素。一、什么是伪元素css伪元素代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。二、语法伪元素的语法：selector:pseudo-element{property:value;}标签：伪元素{性质:值;}CSS类也可以
转载
2024-04-19 05:46:22
63阅读
1.hover伪类<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
转载
2023-06-04 00:29:39
76阅读
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素 简而言之：伪类总是以一个冒号开头。伪元素通常以两个冒号开头。 在 CSS2 时代，伪元素和伪类均是以一个冒号开头的；在 CSS2.1 之后，为了对伪元素和伪类加以区分，规定伪类继续以一个冒号开头，而伪元素改为以两个冒号开头。 但是为了向
转载
2017-08-23 11:45:00
242阅读
2评论
何为伪类？也就是实际实现了类的效果，但是并没有实际添加到标签中的类，这样的就是伪类。伪类的典型构成就是使用了（:）冒号。1.先说最常用的a链接的伪类，目前市场上的主流浏览器都支持。:link 链接样式:visited 链接访问过后的样式（只要访问历史记录存在）:hover 鼠标悬停样式:active 鼠标按下样式其中有些规则，需要按着（Love ha）的顺序样式才会生效。而且这4个伪类不只可以用在
转载
2024-06-07 07:34:34
88阅读
原创
2022-10-20 10:40:33
67阅读
什么是伪类？ 伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。 伪类就是开头为冒号的关键字： :pseu
原创
2021-06-28 14:08:27
850阅读
伪类和伪元素 有时候，你需要选择本身没有标签，但是仍然易于识别的网页部位，比如段落首行或鼠标滑过的连接。CSS为他们提供一些选择器：伪类和伪元素。常用的一些伪类选择器：:link:visited:hover:active表示普通的链接（没访问过的链接）表示访问过的链接浏览器是通过历史记录来判断一个链接是否访问过, *由于涉及到用户的隐私问题，所以使用visited伪类只
转载
2023-07-14 21:00:14
105阅读
伪元素的效果类似于通过添加一个实际的元素才能达到，而伪类的效果类似于通过添加一个实际的类来达到。实际上css3为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。伪类与伪元素的本质区别就是是否抽象创造了新元素。具体的 最后，总结一下伪类与伪元素的特性及其区别：伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；伪元素本质上是创建了一个有内容的虚拟容器
伪类 伪元素 CSS中：和：： - CSDN博客 https://blog.csdn.net/u014527697/article/details/81087139 Pseudo-elements - CSS: Cascading Style Sheets | MDN https://develop
转载
2018-09-11 01:26:00
319阅读
2评论
1.html选择器(标签选择器)基本语法:html标签名称{
属性名:属性值;
属性名:属性值;
}继续在上面的代码中做修改,实例代码:<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<s
转载
2023-12-10 13:33:26
41阅读
定义伪类:
CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。
例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。/* 所有用户指针悬停的按钮 */
button:hover {
color: blue;
}复制代码伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。伪元素:
伪元素是一个附加至选择器末的关键词，允
转载
2021-01-21 10:24:06
249阅读
2评论
在css2中是这样定义二者的： CSS
伪类用于向某些选择器添加特殊的效果。CSS
伪元素用于将特殊的效果添加到某些选择器。
伪类存在的意义是为了通过选择器找到那些不存在DOM树中的信息以及不能被常规CSS选择器获取到的信息。 第一点讲的是获取不存在与DOM树中的信息。比如<a>标签的:link、v
转载
2020-06-03 19:10:00
165阅读
2评论
之前写了一篇 《详解 CSS 属性 - :before && :after》 的博文，当时自己没分清楚伪元素和伪类，所以在文章内把概念混淆了，庆幸 @riophae 兄指正了我的错误，所以今天打算好好研究下两者的区别。首先，阅读 w3c 对两者的定义：CSS 伪类用于向某些选择器添加特殊的效果。CSS 伪元素用于将特殊的效
转载
精选
2016-07-21 19:44:57
605阅读
伪类 ⽤于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据⽤户⾏
转载
2020-10-05 13:25:00
236阅读
2评论
css3为了区分伪类和伪元素，伪元素采用双冒号写法。 常见伪类—— :hover, :active, :visited, :focus。 常见伪元素——::first-letter,::first-line,::before,::after,::selection。 ::before和::after
转载
2017-07-26 11:54:00
195阅读
2评论
