浅谈class选择器（伪类） & 伪元素

最新推荐文章于 2024-07-06 12:03:19 发布
最新推荐文章于 2024-07-06 12:03:19 发布
阅读量1k 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41930094/article/details/112260868
版权

1.伪类

概念：伪类属于选择器的一种，可简洁代码操作元素实现某项功能，无需担心后续 “售后”。
表现形式： 一般前缀使用 ：（冒号）开头

在这里插入图片描述

案例体现：
将文章第一段落，改变样式，原始做法就是给其设定class后，对应位置设置样式，但是一旦段落变化，需要手动将之前定义的class换位置…而此时，如果我们使用伪类 ：first-child就是另一番景象了…

在这里插入图片描述
在这里插入图片描述

用户行为 · 伪类

在这里插入图片描述

:hover 一般用于pc电脑端， 而相对应移动端使用：action
* 前者，鼠标移动触发效果，后者用户点击后触发效果…
:focus 一般用于input框 获取焦点触发…
其他伪类：

在这里插入图片描述

2.伪元素

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

详情见MDN官网:

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements

Greg_Zhong
关注
attr(class)属性和伪类的配合如何使用实现图标样式
qq_45723057的博客
11-15 803
attr(class)属性和伪类的配合使用。 先不说别的，我们先看样式，再给大家讲解为什么 <div class="link2"> <a class="√" href="#">Accept</a> <a class="✘" href="#">Decline</a> <a class=...
伪类 (Pseudo-classes)
ANGWH的博客
11-24 402
CSS 伪类用于向某些选择器添加特殊的效果。 常见的CSS伪类 :active 向被激活的元素添加样式。 :focus 向拥有键盘输入焦点的元素添加样式。 :hover 当鼠标悬浮在元素上方时，向元素添加样式。 :link 向未被访问的链接添加样式。 :visited 向已被访问的链接添加样式。 :first-child 向元素的第一个子元素添加样式。 :lang ...
CSS 伪类(Pseudo-classes)
热门推荐
11-04 1万+
elector.class:pseudo-class {property:value;}   anchor伪类 在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;test&lt;/title&gt; &lt;style&gt; a:link {colo
CSS选择器的常见用法
最新发布
weixin_49817511的博客
07-06 753
css选择器用于选择要应用样式的HTML元素，它是CSS样式表的核心组成部分。它可以通过选择特定的html元素进行css样式的修改，将html和css代码可以分开，降低耦合便于开发。
CSS的id、class、pseudo-class（伪类）
GSCurry的博客
05-05 1589
CSS实例CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:CSS声明总是以分号(;)结束，声明组以大括号({})括起来:p { color:red; text-align:center; }id选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
CSS伪类大全！4大类伪类详解
u013179804的博客
04-25 2032
伪类（Pseudo-class）是 CSS 中一种用于选择元素特定状态或行为的选择器。它们允许我们根据用户操作、元素的位置或其他特定条件来应用样式，从而增强页面的交互性和可读性。用户交互状态：伪类可以根据用户的操作状态来应用样式，如:hover 用于鼠标悬停状态。链接状态：链接伪类如:link、:visited、:hover、:active 用于控制链接在不同状态下的样式，帮助用户区分未访问链接、已访问链接以及鼠标悬停和激活链接。子元素选择。
浅谈CSS伪类与伪元素
01-19
伪类选择器：CSS中已经定义好的选择器,不能随便取名 :link 伪类将应用于未被访问过的链接，与:visited互斥。 :hover 伪类将应用于有鼠标指针悬停于其上的元素。 :active 伪类将应用于被激活的元素，如被点击的链接、...
CSS 选择器浅谈
12-12
CSS选择器是网页样式设计中不可或缺的一部分，它们用于指定HTML或XML文档中元素的样式规则。...随着CSS标准的发展，更多高效且强大的选择器被引入，如伪类和伪元素选择器，让网页设计更加精细和动态。
关于hover伪类选择器浅谈
weixin_44593658的博客
10-19 689
关于hover伪类选择器浅谈 伪类选择器的语法和目标 我们在网页制作的过程中很多地方会遇到鼠标触碰的动画效果，那这就需要用到:hover伪类选择器 这里简单说明一下： 定义:hover指在鼠标移到链接上时添加的特殊样式。 :link 选择器设置了未访问过的页面链接样式, :visited 选择器设置访问过的页面链接的样式 :active选择器设置当你点击链接时的样式。 为了产生预期的效果，在 ...
浅谈CSS样式权值
09-24
- 伪类和伪元素（如`:hover`, `:first-child`等）：权值与类选择器相同，为10 - 通用选择器（*）、子选择器（>）、相邻兄弟选择器（+）、普通兄弟选择器（~）：权值为0 当多个选择器共同作用于一个元素时，权值越高...
【建议收藏】万字整理，一篇文章帮你掌握 Css 选择器
余光的博客
09-06 3712
【建议收藏】万字整理，一篇文章帮你掌握 Css 选择器 简介直观的 css 选择器，可以美化我们的代码，提高可读性，甚至对浏览器的 Css 解析也有帮助。本篇文章的灵感来自于CSS Diner——一个有趣的 css 选择器小游戏，借助下面的例子相信你一定能掌握 css 选择器的妙用，加油～ 全篇文章共22个例子，分别使用了 标签选择器 class id 伪元素 伪类 属性 篇幅较长，建议收藏 阅读指南 先贴出选择器字典，帮助大家回忆基本的选择器含义 阅读示例 阅读代码，并完成题目（仅思考选择器部
⑧伪类（Pseudo-class）
LB_bei的博客
07-03 291
伪类（Pseudo-class）是CSS中一种用于选择元素的特殊关键字。它们用于向特定状态或条件下的元素应用样式。在CSS中，伪类以冒号 : 开头，跟随着伪类的名称。伪类可以与选择器组合使用，以选择满足特定条件的元素。
CSS进阶篇——伪类 (pseudo classes)
老梁的专栏
09-29 607
伪类（pseudo classes）要和选择器捆绑使用，用于表示某种状态（state）或关系（relation）。它的形式是「选择器:冒号:伪类」。
伪元素
来呀，快活呀
03-28 718
一个虚拟的元素，用于已有的元素添加特殊效果，可用标签实现该效果 注：CSS3中伪元素由两个冒号开头“：：”，然后接名称。 CSS2
css中什么是伪类？伪类，伪元素有哪些？区别是什么？
子玉的博客
10-27 723
伪元素（Pseudo-element）则是用于创建并操作元素的特定部分，它可以在DOM中创建一个不存在的元素，并为其添加样式。常见的伪元素包括：before（在元素内容之前插入内容）、after（在元素内容之后插入内容）、first-letter（选取第一个字母）等。伪类（Pseudo-class）和伪元素（Pseudo-element）是CSS中的两个概念，用于选择DOM元素的特定状态或位置。1. 目标不同：伪类选择已存在的元素的特定状态或行为，而伪元素创建一个不存在的元素的特定部分。
详谈css中的伪类和伪元素
qq_41706280的博客
10-24 338
借鉴了csdn上的两篇博文：博文1 博文2 1.什么是伪类和伪元素？ w3c的解释： 伪类：用于向某些选择器添加特殊的效果 伪元素：用于将特殊的效果添加到某些选择器 看字面意思的话看不出来他两个的区别，都是在某些选择器中添加特殊的效果 其他解释： 伪类用于选择DOM树之外的信息，包含那些 匹配指定状态的元素 ，比如:visited，:active；或是 不能用简单选择器进行表示的信息 ，后...
CSS伪类的相关介绍和应用
weixin_58168263的博客
10-26 248
相信大家在平时写代码的过程中会遇到一些问题，比如：我想要简单的添加一些类似动态的效果，增加交互性，或者是需要一定js代码来实现的逻辑效果。但是我又不会写动态的样式，我也不是很懂js语言，那我们怎么用简单的CSS来实现我们想要的效果呢？这就需要用到我今天给大家介绍的“伪类”(Pseudo-classes)。
CSS中的伪类、伪元素、子元素的伪类和否定伪类
weixin_71187097的博客
07-15 1047
CSS中的伪类、伪元素、子元素和否定伪类
伪元素和伪类的区别和作用？
study_way的博客
10-14 483
伪元素伪元素（pseudo-elements）是CSS中的一种选择器，用于选择元素的特定部分而不是整个元素本身。伪元素允许你在已选择的元素内部创建或修改内容，而无需在文档结构中添加额外的HTML元素。伪元素的语法以（双冒号）作为前缀，如::before和::after。::before：用于在所选元素的内容之前插入生成的内容。这通常用于在元素前面添加一些装饰性的内容，比如图标或文本。::after：用于在所选元素的内容之后插入生成的内容。类似于::before，它也经常用于添加额外的装饰性元素。
CSS选择器详解：元素、关系、属性、伪元素与伪类
"CSS选择器.pdf" 在前端开发中，CSS（Cascading Style Sheets）是用于控制...同时，随着CSS版本的更新，例如CSS3引入了更多的选择器，如更强大的伪类和伪元素，以及更精确的属性选择符，使得CSS的表达能力进一步增强。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值