a:link选择网页中所有没有被visited的a标签,就是没有鼠标悬停hover或者点击click(a链接没有被访问时的样式) a:visited选择网页中所有已经被click的a链接，用来告诉用户这个链接已经被你访问过了...（a链接对象被访问后的样式） a:hover,说实话这个我用的最多，其实就是选择有鼠标悬停的a链接 a:active,顾名思义active就是活动的意思，表示的是选择用户点击并且还没有放开时（其实就是按住
background-color: pink; color: white; text-decoration: none; } ul li a:hover
color: red; } a:visited { color: yellow; } a:hover...-- 1.通过我们的观察发现a标签存在一定的状态 1.1默认状态, 从未被访问过 1.2被访问过的状态 1.3鼠标长按状态 1.4鼠标悬停在a标签上状态 2.什么是a标签的伪类选择器?...a标签的伪类选择器是专门用来修改a标签不同状态的样式的 3.格式 :link 修改从未被访问过状态下的样式 :visited 修改被访问过的状态下的样式 :hover 修改鼠标悬停在a标签上状态下的样式...:active 修改鼠标长按状态下的样式 4.注意点 4.1a标签的伪类选择器可以单独出现也可以一起出现 4.2a标签的伪类选择器如果一起出现, 那么有严格的顺序要求 编写的顺序必须要个的遵守爱恨原则
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie...
:link 伪类将应用于未被访问过的链接，与:visited互斥。 :visited 伪类将应用于已经被访问过的链接，与:link互斥。...:hover 伪类将应用于有鼠标指针悬停于其上的元素。 :active 伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。...需要注意的是在CSS的定义中，同一个元素的:hover必须位于:link、:visited之后才能生效，:active必须位于:hover之后才能生效。...:focus 伪类将应用于拥有键盘输入焦点的元素。 :first-child 找到父级中的第一个子元素，必须是这个标签
， 11 3月 2021 作者 847954981@qq.com 前端学习 CSS伪类 伪元素–::before和::after 如果想在某一标签元素后面 ，添加一个新的元素，可以使用伪元素 ::before...和::after 其作用是在元素后添加新的伪元素 写法是 选择器::after/before /* 在span之前添加行内元素 */ span::before { /* 使用空白符号占位 */ content...24px; height: 24px; background: url(ＵＲＬ) no-repeat center; background-size: contain; } 事件伪类...鼠标移入—:hover 当需要鼠标移入之后改变某一标签内内容的样子，可以在CSS中添加 :hover 伪类 如： div{ background-color:red } div:hover{...background-color:yellow } 如此 除此之外，事件伪类还有很多 如 :active—-鼠标点击 :focus—-获取焦点 列表伪类 当在一标签下存在数个同一标签名的子标签 可以通过
CSS伪类与伪元素 每日更新前端基础，如果觉得不错，点个star吧 ?...伪类 伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。...虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。 状态性伪类 是基于元素当前状态进行选择的。...常见的状态伪类 :link 应用于未被访问过的链接 :hover 应用于鼠标悬停到的元素 :active 应用于被激活的元素 :visited 应用于被访问过的链接，与:link互斥 :focus 应用于拥有键盘输入焦点的元素...CSS3规范中要求使用单冒号:用于CSS3伪类，双冒号::用于 CSS3伪元素，目的是区分伪类和伪元素。
CSS伪类：控制元素的某种状态 语法：元素名称:伪类名称{属性:值} CSS伪类控制链接状态 状态 语法 未访问的链接 a:link{color:#ff00ff} 已访问的链接 a:visited{...color:#00ffff} 鼠标移动到链接上 a:hover{color:$ffaaaa} 鼠标按下链接 a:active{color:#b4b4b4} 注：如果链接不起作用，请修改链接状态顺序为...link--visited--hover-active.
1.伪类与伪元素 先说一说为什么css要引入伪元素和伪类，以下是css2.1 Selectors章节中对伪类与伪元素的描述： CSS introduces the concepts of pseudo-elements...下面分别对伪类和伪元素进行解释： 伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。...比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。...CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(::)，:hover和:active等伪类使用单冒号(:)。...处于试验阶段的伪类或伪元素会在标题中标注。 伪类 状态 由于状态伪类的用法大家都十分熟悉，这里就不用例子说明了。
背景 写了这么多年代码，对CSS中的伪类和伪元素竟然没有细致的进行过学习总结，由此可见在实际代码开发中，用的也确实不多，也就用过一些:first-child,:hover之类的吧，其它的连before...什么的都没用过，于是迫切需要大于伪元素与伪类进行一个系统整体的学习。...伪类和伪元素 伪类：是以一个冒号作为前缀，被添加到选择器的末尾，当你希望在特定状态下(:hover)才被呈现到指定元素时，可以往元素的选择器后面加上伪类。...常用的伪类和伪元素 伪类可以从状态类伪类、结构类伪类、其它伪类和表单相关伪类进行分类。...状态类伪类：** :hover、:link、:active、:visited、:focus** 结构类伪类：** :first-child、:last-child、:nth-child(n)** 其它伪类
伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。...伪类的种类 伪元素的种类 区别 这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。...我们一般做法，也可以这么来实现，就是单独加一个类。...然后定义这个类的样式。... 总结 伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
CSS 引入伪类和伪元素的概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。...2.伪类和伪元素的概念 2.1 伪类： 伪类用于当已有元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。...3.伪类列举 伪类和伪元素-1.png 3.1 状态伪类 状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。...状态伪类的顺序很重要，顺序错误可能会导致没有效果。通常的建议是LVFHA，即—–link，visited，focus，hover，active。...选择器 示例 示例说明 :link a:link 选择所有未访问的链接 :visited a:visited 选择所有访问过的链接 :hover a:hover 选择鼠标悬空的链接 :active a:
定义 伪类 CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。 例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。.../* 所有用户指针悬停的按钮 */ button:hover { color: blue; } 伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。...分类 伪类 ? 伪元素 ?...因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。...总结 1.伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息； 2.伪元素本质上是创建了一个有内容的虚拟容器； 3.CSS3中伪类和伪元素的语法不同； 4.可以同时使用多个伪类，而只能同时使用一个伪元素
熟悉前端的人都会听过css的伪类与伪元素，然而大多数的人都会将这两者混淆(包括我)。那今天就让我们来看看伪类和伪元素的区别吧!...伪类与伪元素 先说一说为什么css要引入伪元素和伪类，以下是css2.1 Selectors章节中对伪类与伪元素的描述： CSS introduces the concepts of pseudo-elements...比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。...伪类 伪类前面是一个冒号，E:first-child 伪类，会对现有的元素进行筛选 :link :visited :hover :active :focus :not() :first-child :last-child...icon.png') 配合伪类使用 伪元素 :before 还可以配合伪类使用，这里举经常与 :before 配合使用的伪类 :hover 为例： .before:hover:before{content
为什么要引入伪类与伪元素？ css引入伪类和伪元素概念是为了格式化文档树以外的信息。...也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或是列表中的第一个元素，又或者是鼠标悬停在某个超链接上时要设置的样式。 什么是伪类，伪元素？...伪类：用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。...伪类的分类：状态伪类和结构性伪类 状态伪类：是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。...常见的状态伪类主要包括： :link 应用于未被访问过的链接； :hover 应用于鼠标悬停到的元素； :active 应用于被激活的元素； :visited 应用于被访问过的链接
伪类和伪元素用于css选择器，利用他们使css更灵活。...常见的伪类 伪元素与伪类的区别 伪元素将元素的某些部分作为元素选中（但不选中真正的元素），而伪类对应选择的元素的特殊状态（选择真正的元素）。...w3c的定义是，伪类用于向某些选择器添加特殊的效果（选择器已选中元素），伪元素用于将特殊效果添加到选择器（通过伪元素才能确定选中元素）。...更直观的理解是，伪元素达到的效果必须通过添加真实的元素替代，而伪类达到的效果必须通过添加真实的类替代。 :hover 鼠标悬停于某一元素时生效。...:root 匹配文档树的根元素，在HTML文档中匹配html元素 更多伪类 https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
在“超链接伪类”这一节，我们知道“a:hover”是定义鼠标经过超链接（a标签）时的样式。...不仅是初学者，甚至包括很多学习CSS很久的人都以为“:hover”只限于a标签，都觉得“:hover”唯一的作用就是定义鼠标经过超链接（a标签）时的样式。...请记住，“:hover”伪类可以定义任何一个元素在鼠标经过时的样式！ 语法： 元素:hover{} 说明： “元素”可以是任意的块元素和行内元素。 举例1： :hover伪类...“:hover”伪类应用非常广泛，在绿叶学习网中也大量使用，大家仔细观察一下绿叶学习网就知道了
例如，:hover伪类可以选择鼠标悬停在其上的元素，:nth-child伪类可以选择特定位置的子元素。伪类通常以冒号（:）开头，紧跟在选择器之后。...核心概念解析 常见伪类 1. :hover :hover伪类用于选择鼠标悬停在其上的元素。常用于按钮、链接等交互性元素的样式化。...减少伪类选择器的嵌套：嵌套选择器会增加匹配复杂度，应尽量减少嵌套层级。 使用高效的伪类：优先使用性能较好的伪类，如:hover、:focus等。...(odd):hover { background-color: #f2f2f2; } 安全考量 安全挑战 样式泄漏：伪类选择器可能会导致样式泄漏，暴露不应公开的信息。...案例研究 案例一：电商网站的交互优化 在一个大型电商网站中，开发者通过使用:hover和:focus伪类，优化了产品列表的交互效果。在鼠标悬停和获取焦点时，产品图片和描述会发生变化，提升了用户体验。
1.伪类选择器和伪元素选择器 伪类选择器是用来向某些选择器来添加效果。...（空格） :not（标签名） （3）目标伪类选择器： :target （4）UI元素状态选择器： :enabled :disabled :checked （5）动态伪类选择器： :link...:visited :hover :active （6）用户行为伪类选择器 :focus 伪元素选择器则是用来将特殊的效果添加在选择器上。...：伪类不修改DOM容，通过一些特定的选择器根据特定的状态，特定条件来修改元素的样；而伪元素可能改变DOM结构，创造了虚拟的DOM 伪类选择器只是相当于给标签加上了个名字，让我们能够找到精准的位置，而伪元素选择器修改了他原本的结构...2.注意 可通过使用css伪类实现点击元素变色的效果，两个伪类是:active, :focus :active :active选择器用于选择活动链接。
CSS 伪类 选择器 例子 例子描述 :active a:active 选择活动的链接。 :checked input:checked 选择每个被选中的 元素。...:hover a:hover 选择鼠标悬停其上的链接。 :in-range input:in-range 选择具有指定范围内的值的 元素。...CSS 伪元素 选择器 例子 例子描述 ::after p::after 在每个 元素之后插入内容。 ::before p::before 在每个 元素之前插入内容。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
