css3伪类与伪元素

最新推荐文章于 2023-06-22 19:29:38 发布
最新推荐文章于 2023-06-22 19:29:38 发布
阅读量184 收藏
点赞数
分类专栏： css3 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Rainy_X/article/details/108279459
版权

概念

  • CSS 伪类用于向某些选择器添加特殊的效果

  • CSS 伪元素用于将特殊的效果添加到某些选择器

个人理解：
伪类大多使用的是状态相关的，例如这个标签点击前后的效果，这个标签的第几个样式等
伪元素相当于是在某个元素后加个新的元素，js是无法获取的

伪类

在这里插入图片描述

伪元素

在这里插入图片描述

总结

css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
但因为兼容性的问题，所以现在大部分还是统一的单冒号

原文：https://www.imooc.com/article/254506

Rainy_X
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3 伪类伪元素使用技巧
Maci_yera的博客
09-11 984
1.之前学习过css3的伪元素::before和::after，可以做很多事情。一个是可以做一些css3图标，功能异常强大；另外是可以配合:hover做一些按钮效果（参考https://tympanus.net/Development/CreativeLinkEffects/#cl-effect-21）。 2.对于伪类需要注意常用伪类的使用顺序，参见之前的文章，关于伪类与伪元素的配合使用：<sty
CSS 伪类与伪元素辨析
huaqi_的博客
01-17 149
伪类、伪元素
CSS中的伪类和伪元素（详细）
m0_52083530的博客
01-21 1万+
这篇想要跟大家分享的是css中的伪类和伪元素，有任何问题可以私聊我或者评论哦！ 首先，我们先来想一下，为什么要引入伪类跟伪元素？ css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或是列表中的第一个元素，又或者是鼠标悬停在某个超链接上时要设置的样式。 什么是伪类，伪元素？ 伪类：用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:h
CSS3伪类和伪元素
qq_36412715的博客
08-12 668
1.伪类 CSS3给出的定义是： 伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。 通过上面的概念我们知道了伪类的功能有两种： 1.格式化DOM树以外的信息。比如： <a> 标签的:link、:visited等。这些信息不存在于DOM树中。 2.不能被常规CSS选择器获取到的信息。比如：要获取第一个子元素，我们无法用常规的CSS选择器获取...
伪类和伪元素（详细介绍）
宝子的博客
06-22 6664
CSS种伪类和伪元素的详细介绍
伪元素与伪类
Yous的博客
07-03 7684
伪类比较好理解。以上完全看不懂~先看一遍伪元素演示： body中： css部分： 效果图： 同理； 其它还包括：伪元素 用来设置指定元素中内容第一个字符的样式，通常用来配合 font-size 和 float 属性制作首字下沉效果。需要注意的是，伪元素 仅可以用于块级元素，行内元素想要使用该伪元素，则需要先将其转换为块级元素。伪元素 用来设置指定元素中内容第一行的样式，与 类似，伪元素 也仅可以用于块级元素，行内元素想要使用该伪元素，则需要先将其转换为块级元素。伪元素 用来设置对象被选中时的样
伪类和伪元素的区别及使用场景
qq_66390045的博客
03-22 3958
1. 伪类和伪元素的区别 1.1 作用不同 伪类是一种状态，可以看看做是选择器。比如鼠标经过 伪类 :hover , 比如 结构伪类 li:nth-child， 一个冒号。 伪元素 是 元素， 简单来说，就是用css 模拟出来了一个盒子。 1.2 权重不相同 伪类 是 10 （类、属性选择器 [type=submit]） 伪元素 是 1 (标签选择器 ) 1.3 使用场景不同 比如:鼠标经过盒子，盒子里面的样式会有变化，则...
css3 伪元素和伪类选择器详解
09-25
无论是伪类还是伪元素，都属于CSS选择器的范畴。所以它们的定义可以在CSS标准的选择器章节找到。分别是 CSS2.1 Selectors 和 CSS Selector Level 3，两者都已经是推荐标准。
浅谈CSS伪类与伪元素
09-25
本文向大家展示了CSS的伪类与伪元素，介绍的非常全面，这里推荐给大家参考下。
CSS伪类和伪元素的区别详解
09-25
在CSS3中，为了更好地区分，伪类使用单个冒号（`:hover`），而伪元素使用双冒号（`::before`）。然而，出于兼容性的考虑，许多开发者仍然使用单冒号的形式。尽管如此，了解这一区别并在编写代码时遵循这一规范是有益...
详解CSS中的伪类与伪元素及二者间的区别
09-24
1. 表示方式：伪类只有一个冒号(:)，伪元素有两个冒号(::)（在CSS2.1中，伪元素也使用一个冒号，但在CSS3中进行了区分）。 2. 存在形式：伪类描述元素在特定状态下的表现，而伪元素则是在元素内部创建的虚拟内容，...
CSS3伪类与伪元素的区别及注意事项
尐轩web前端网络日志
12-10 1万+
CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别定义首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的 伪类：用于向某些选择器添加特殊的效果 伪元素：用于将特殊的效果添加到某些选择器 讲道理，可能我语文不好，我觉得这两句话是等价的 :-) 根本不能看出有什么区别 都是对某些选择器“加特技”标准有这么一句话翻译过来是这样的 CSS 引入伪类和伪元素的概
css3 伪类与伪元素
qq_35779012的博客
08-02 118
一、什么是伪类？ 伪类用于定义元素的特殊状态。 例如，它可以用于： 设置鼠标悬停在元素上时的样式 为已访问和未访问链接设置不同的样式 设置元素获得焦点时的样式 语法： selector:pseudo-class { property: value; } 示例： /* 未访问的链接 */ a:link { color: #FF0000; } /* 已访问的链接 */ a:visited { color: #00FF00; } /* 鼠标悬停链接 */ a:hover {
CSS伪类与伪元素
热门推荐
阳光下的冷静的博客
03-11 1万+
为什么要引入伪类与伪元素？ css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或是列表中的第一个元素，又或者是鼠标悬停在某个超链接上时要设置的样式。 什么是伪类，伪元素？ 伪类：用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以...
浅谈CSS伪类和伪元素及CSS3新增伪类
筱葭的博客
02-28 8710
p:first-of-type 选择属于其父元素的首个元素的每个元素。 p:last-of-type   选择属于其父元素的最后元素的每个元素。 p:only-of-type   选择属于其父元素唯一的元素的每个元素。 p:only-child    选择属于其父元素唯一的子元素的每个元素。 p:nth-child(n)   选择属于其父元素的第n个子元素的每个元素。
区分伪类和伪元素
F-ZERO-F的博客
04-23 1007
一：伪类： 1:定义：css伪类用于向某些选择器添加特殊效果。 伪类其实与普通的css类相类似，可以为已有的元素添加样式，但是他只有处于dom无法描述的状态下才能为文档树中的元素添加样式，所以将其称为伪类。(这种文档树无法描述的状态是什么呢？当一个元素在用户的不同行为下就变化成不同的状态这个行为的变化dom就无法描述，就要产生伪类，来为一些选择器添加特殊的效果)。 2:什么是文档树（DOM）
CSS3伪类和伪元素的特性和区别
嘿嘿
04-13 213
前端er们大都或多或少地接触过CSS伪类和伪元素，比如最常见的:focus,:hover以及<a>标签的:link、visited等，伪元素较常见的比如:before、:after等。 其实上面提到的这些伪类和伪元素都是CSS1和CSS2中的概念，CSS1和CSS2中对伪类的伪元素的区别比较模糊，甚至经常有同行将:before、:after称为伪类。CSS3对这两个概念做了相对较清晰...
CSS 伪类和伪元素归纳
liuqiao0327的专栏
08-23 342
CSS 伪类和伪元素 1.伪类 CSS伪类用于向某些选择器添加特殊的效果 1.CSS3之前的伪类(状态伪类) 图中前5个为状态伪类 2.CSS3新增的伪类(结构伪类) 属性 说明 X:first-child 其父元素的首个子元素。IE7就可以支持 X:last-child 匹配父元素中最后一个X元素 X:nth-child(n) 用于匹配索引值为n的子元素。索引值从1开始 X:only-child 这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也
 css伪类与伪元素
最新发布
03-19
CSS伪类和伪元素是用于和样式化HTML元素的特殊选择器。它们允许我们根据元素的状态或位置来选择元素，并为其应用不同的样式。 1. 伪类（Pseudo-classes）： - 伪类用于选择处于特定状态的元素，例如鼠标悬停、被...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值