[log] css选择器、伪类、伪元素

最新推荐文章于 2025-03-19 16:51:32 发布
原创 最新推荐文章于 2025-03-19 16:51:32 发布 · 220 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入探讨了CSS中伪元素和伪类的概念，解析它们如何帮助我们定位文档中的特定文本，以及在不修改DOM的情况下增强页面样式。伪元素允许我们操作DOM之外的文档结构，而伪类则用于反映元素的状态或属性。

选择器

在这里插入图片描述

在这里插入图片描述

伪元素

伪元素可以用于定位文档中包含的文本，但无法在文档树中定位，伪元素表示DOM外部的某种文档结构，使用双冒号

伪类

一般反映无法在css中轻松或可靠的检测到的某个元素属性或状态，

在这里插入图片描述

在这里插入图片描述

【高频考点精讲】CSS伪类和伪元素完全指南：:hover、:before这些到底有什么区别？
全栈老李的博客
05-13 1435
🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。大家好，我是全栈老李。今天咱们来聊聊CSS中那些让人又爱又恨的伪类和伪元素，很多同学用了好几年CSS，可能还是分不清:hover和:before到底有什么区别。别急，今天老李就带大家彻底搞明白这个知识点。
前端面经-CSS篇(三）---伪元素和伪类选择器
最新发布
qq_44643806的博客
04-06 1062
伪元素是 CSS 创建的“假元素”，它不是 HTML 中真实存在的标签，是一种由 CSS 创建出来的“虚拟元素节点”，它并不真实存在于 HTML 的 DOM 结构中，但浏览器在渲染时会像处理普通元素一样，把它插入进渲染树中。你可以用来添加一些装饰、内容、布局结构等。::before：用于在元素内容之前插入内容。::after：用于在元素内容之后插入内容。：用于选中文本内容的第一个字母。：用于选中文本内容的第一行。借助::before，我们可以实现很多“视觉增强效果”，无需在 HTML 中多加一层。
css之伪类选择器:before :after(::before ::after)
weixin_34348111的博客
07-20 715
一、总结： ::before是在标签内容前面添加内容， ::after是在标签内容后面添加内容 ::before ::after与:before :after的区别：css3中修订后的伪元素使用：：两个冒号，使用单冒号和双冒号的功能还是一样，IE8只支持单冒号的伪元素，所以使用单冒号的最安全。 关于伪元素和伪类（选择器）： 伪元素： 伪类选择器： 二、实例： ...
css的伪类before的使用
平凡之路
04-08 720
首先我们还是先上效果图： 看我我在最新New之前利用before伪类加了一个竖标识； 直接上代码： 结构如下： <view class="new {{newSelect?'active':''}}" @tap="choseNew"> 最新<image src="../../images/index/new.png"/> ...
CSS中的before,after伪类选择器
缪子龙的博客
08-24 420
首先,它是在css中的,所以不占DOM,既然不占DOM,JS就没办法操作 第二,它就是个选择器,我们需要在选择器中填入内容 所以必须有content属性,就算是空也必须有 第三,没有什么神秘的,非用不可的情况 可以使用html改写 <div class="demo"> 123 </div> .demo:before { content: 'abc';...
CSS——伪元素&:before
samn_aa的博客
03-12 5594
content从定义我们知道::before和::after匹配一个虚拟元素，主要被用于为当前元素增加装饰性内容的。他显示的内容是其自身的“content”属性，默认是内联元素。其实::after和::before被引入css中，最核心的目的，还是为了实现语义化。在我们实际开发时候经常有这样的经历，为了实现一些效果，在文档中创建了一些没有实际内容的节点，或者加入辅助样式的文本.
CSS选择器和jQuery选择器
01-31
### CSS选择器与jQuery选择器详解 #### 一、引言 在现代Web开发中，选择器扮演着至关重要的角色。无论是对HTML元素应用样式还是对其进行动态操作，选择器都是必不可少的工具。本文将深入探讨两种常用的选择器——...
掌握CSS伪类选择器：pseudos库完整指南
3. **否定伪类**：`:not()`伪类用于选择不符合特定选择器的元素。这是一个功能强大的伪类，可以帮助我们排除一些不需要应用样式的元素。 4. **目标伪类**：`:target`伪类用于选中URL片段标识符指向的元素。 5. **...
JS控制伪元素的方法汇总
10-22
由于伪元素并不实际存在于DOM中，它们是CSS渲染层的一部分，因此JavaScript的DOM操作方法，包括jQuery的选择器，都无法直接作用于伪元素。例如，尝试使用`$(“:before”)`或`document.querySelector(“:before”)`...
前端必修技能：高手进阶核心知识分享 - CSS伪类和伪元素
uu0216的博客
07-19 1285
伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。 伪类选择器和伪元素选择器虽然不是真正的元素，但它们在CSS中扮演着极其重要的角色。了解并熟练运用它们，可以让你的网页更加生动、互动性更强，同时也能更好地控制页面的布局和内容的表现。
CSS 中的 ::before 和 ::after 伪元素
热门推荐
m0_65029152的博客
07-11 1万+
本文主要记录CSS中的 ::before 和 ::after 伪元素的相关内容和使用场景；
CSS伪类选择器使用实例
Mentina的小屋
03-14 2943
    今天的小技巧主要是搞明白了CSS3新增的伪类选择器，并和之前的伪类选择器做比较~~~    每一次看伪类选择器的介绍总有一种语文没学好的感觉，so只能上实例理解了~    这次主要学习了 :first-of-type/:last-of-type/:only-of-type/:nth-child(n)//============================================...
[log] css常用样式
好好学习，天天向上
11-08 369
文字排版 文字截断 场景:一般是处理商品名称过长 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; ...
用css装饰console.log()
Kidaze的博客
07-12 402
基本使用方法： 主要使用的是%c字符，前用%c+需输出内容，后写css属性 console.log('%cHey there BP in your area ????','padding: 0.3rem 1.5rem;color: white;background-color: #4158D0;background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);font-size:1.5em') 效果如图：
CSS3新增属性伪元素选择器before和after
王大静的博客
03-19 432
语法：element::before {} element::after {}直接给before内容设置宽高是不生效的，因为是行内元素，以下设置为行内块元素了。::before 在元素内部的前面插入内容。::after 在元素内部的后面插入内容。
::before 和 ::after 伪元素选择器
weixin_58697368的博客
11-08 732
伪元素不是真正的页面元素，在 HTML 中没有对应的元素。伪元素代表了某个元素的子元素，这个子元素虽然在逻辑上存在，实际并不存在于 HTML 文档中。伪元素在 HTML 中无法审查，但是伪元素的用法和真正的页面元素一样，可以用来对CSS设置样式，用于将特殊的效果添加到某些选择器。
css :before / :after 伪类选择器的真正作用及使用场景
Thinking anywhere anytime.
12-10 6490
css :before / :after 伪类选择器的真正作用及使用场景
css伪类和伪元素的前世今生，:before和::before傻傻分不清！
xiaokangyingrui的博客
03-07 555
css伪类和伪元素的前世今生，:before和::before傻傻分不清！善用工具 也善洞悉本质
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值