伪类 和伪元素 你混淆了吗？

最新推荐文章于 2024-09-13 10:46:15 发布
最新推荐文章于 2024-09-13 10:46:15 发布
阅读量113 收藏
点赞数 3
分类专栏： 程序员 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84092360/article/details/138541987
版权

background: gold;

}

input:out-of-range+h2::after {

/* :out-of-range 伪类 */

/* ::after 伪元素 只能有一个*/

/* 超出input的输入范围h2拼接 超出范围的文字 */

content: ‘超出范围’;

color: red;

}

请输入数字

结果 :

在这里插入图片描述

伪类伪元素位置
Document

在这里插入图片描述

伪类、伪元素 DOM操作
Document
    • 第一个
    • 第二个
    • 第三个
    • 第四个
    • 第五个

    • 在这里插入图片描述

      伪类伪元素优缺点对比
      Document
    2401_84092360
    关注
    专栏目录
    【运用flex制作携程界面练习笔记】
    qq_43178432的博客
    06-06 228
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 运用flex制作携程界面练习前言一、设置搜索栏在网页固定且居中效果二、伪元素和伪类2.1 需求：定义一个输入框，当输入数字超出可选范围，则改变输入框的颜色提醒用户2.2 需求：定义一组复选框，当选中复选框时，在复选框后提示已勾选三、 设置最常见的上面一个图片，下面是文字描述的样式 前言 主要记录我自己觉得重要的知识点 参考学习视频 提示：以下是我自己的思考，错误的地方欢迎指出 一、设置搜索栏在网页固定且居中效果 .search-i.
    伪类 和伪元素 你混淆了吗？(1)
    2401_84092169的博客
    05-07 221
    自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
    浅析什么是伪类和伪元素？伪类和伪元素的区别解析
    qq_47443027的博客
    08-02 9233
    1、伪类种类伪类作用对象是整个元素尽管这些条件不是基于DOM的，但结果每一个都是作用于一个完整的元素，比如整个链接，段落，div等等。2、伪元素种类伪元素作用于元素的一部分：一个段落的第一行或者第一个字母}伪元素其实相当于伪造了一个元素，例如 before，first-letter 达到的效果就是伪造了一个元素，然后添加了其相应的效果而已；而伪类没有伪造元素，例如 first-child 只是给子元素添加样式而已。伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但。...
    简单了解伪类和伪元素的区别
    冰雪为融的博客
    04-03 1818
    使用伪元素的时候，总是感觉和伪类很相似，但又不能详细的说出两者的区别和联系，那么两者到底有什么区别和联系呢？下面我们就来聊聊两者，这个介绍的不多，主要还是聊聊伪元素的一些特点，这里不怎么写具体的实例，详细的应用后续我会做出详细的总结。伪类的定义：伪元素的定义：CSS伪元素是用来添加一些选择器的特殊效果。伪元素的语法：CSS伪类是用来添加一些选择器的特殊效果。哈哈，除了伪类和伪元素不同，其他的好像都...
    什么是伪类和伪元素？伪类和伪元素的区别的区别详解
    程宇寒
    10-15 1922
    本篇文章给大家带来的内容是关于什么是伪类和伪元素？伪类和伪元素的区别的区别详解，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 1、伪类种类 2、伪元素种类 （1）伪类作用对象是整个元素 例如： a:link {color:#111} a:hover {color:#222} div:first-child {...
    谈谈css中的伪类和伪元素,谈谈css中的伪类和伪元素
    weixin_39637979的博客
    08-04 166
    熟习前台的人都会听过css的伪类与伪元素，然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发，区分这两者的区别，并且列出大部分伪类与伪元素的具体用法。css选择器css选择除了我们常见的也是使用频率最高的class选择器，id选择器，属性选择器，派生选择器等之外，还有重要的一类，是根据元素的状态或者者元素中特别的内容来选从HTML文档的DOM树中获取元素，就两种就是伪类和伪元素，他们...
    css伪类和伪元素的区别
    hangGe0111的博客
    02-28 498
    转载：https://www.jianshu.com/p/996d021bced3 伪类和伪元素，对于绝大多数同学来说，都是耳熟能详的名字，但确实又有很多人搞不清楚它们之间的区别，以致于混淆概念。而当概念都混淆的时候，也往往意味着你不会经常使用它，怕出错，怕用不好。而这也会大大影响你的效率，本来几行代码就可以完成的工作，却要写上一大堆......所以，花点时间理清楚每一个看似微小的概念，会让我们...
    伪类和伪元素总结
    yingtaoxiaowanzi123的博客
    04-18 249
    伪元素用于在选定元素的内容前后插入内容，或选择元素的特定部分。:nth-last-type：nth-last-of-type与nth-of-type相似，不同之处在于它是从最后一个子元素开始计数的。伪类是基于元素的状态或位置来选择元素，而伪元素则是用于插入内容或选择元素的特定部分。:only-of-type：当元素是其父元素中唯一一个特定类型的子元素时，:only-child匹配该元素。它们通常以冒号（:）开头。:first-of-type：选择属于父元素的首个特定类型的子元素的每个元素。
    CSS中伪类与伪元素，你弄懂了吗？
    Haines
    02-28 249
    前言 熟悉前端的人都会听过css的伪类与伪元素，然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发，区分这两者的区别，即使你有用过伪类与伪元素，但里面总有一两个你没见过的吧。 伪类与伪元素 先说一说为什么css要引入伪元素和伪类，以下是css2.1 Selectors章节中对伪类与伪元素的描述： CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on
    CSS :active 伪类 元素被激活时的样式
    09-24
    CSS中的:active伪类是一个非常重要的样式选择器，它的主要功能是定义在用户与页面元素交互时，元素处于“激活”状态下的样式。当一个元素被激活，比如鼠标按键在该元素范围内按下还没有释放时，:active伪类所指定的...
    前端必修技能：高手进阶核心知识分享 - CSS伪类和伪元素
    uu0216的博客
    07-19 1069
    伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。 伪类选择器和伪元素选择器虽然不是真正的元素，但它们在CSS中扮演着极其重要的角色。了解并熟练运用它们，可以让你的网页更加生动、互动性更强，同时也能更好地控制页面的布局和内容的表现。
    自学前端第十五天:伪类伪元素和属性选择器和精灵图
    weixin_47592060的博客
    05-04 662
    #一.基础伪类选择器(也是交集选择器一种,优先级也要叠加) 1.概念:某个选择器的镜像,当光标移动到盒子时会触发新的一面不同的效果,但是是短暂的而已 2.作用:伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果。 3.优先级权重:伪类分值和类名选择器一样是0,0,1,0分的,因此a:hover 叠加= 0,0,1,1(很重要!!!) 4.伪类语法结构: ① 类选择器是一个点 比如 .demo {} ②而我们的伪类 用冒号 比如 类 :link{} a { /* a
    伪元素的背景图过渡写法
    langziangTom的博客
    10-05 331
    伪元素背景过渡
    构建高效 Python Web API：RESTful 设计与 GraphQL 实践
    weixin_52392194的博客
    09-11 1293
    在现代 Web 开发中，API 是前后端通信的核心枢纽，设计一个高效且易于扩展的 API 是保证系统良好运行的基础。本文详细探讨 RESTful API 的设计准则，如何生成 API 文档，GraphQL 的应用，以及如何在 FastAPI 和 Django REST Framework 中实现分页、过滤、认证等功能。
    （微服务项目）新闻头条——Day1
    最新发布
    weixin_73253843的博客
    09-13 787
    （微服务项目）新闻头条——Day1
    2024伊语IM即时通讯源码/im商城系统/纯源码IM通讯系统安卓+IOS前端纯原生源码
    翎风世界
    09-10 667
    2.4 node安装wget "https://nodejs.org/dist/v12.18.3/node-v12.18.3-linux-x64.tar.xz"资料参考地址：https://www.1234f.com/sj/GitHub/qtym/20240910/677.html。源码下载地址：https://www.123pan.com/s/LA1bVv-5l5Vv。备用下载地址：http://pan.1234f.com:5212/s/5PrS4。api.xxx.com接口。im.xxx.com通讯。
    react 基础语法
    小白小白从不日别的博客
    09-13 1442
    React 官方中文文档目前前端最流行的是三大框架：Vue、React、Angularreact是一个用于构建用户界面的 JavaScript 库react官网(Reactreact中文网(React 官方中文文档React 是一个用于构建用户界面（UI，对咱们前端来说，简单理解为：HTML 页面）的 JavaScript 库Vue 是一个渐进式的 JavaScript 框架如果从mvc的角度来看，React仅仅是视图层（V）的解决方案。也就是只负责视图的渲染，并非提供了完整了M和C的功能。
    【前端】vue+html+js 实现table表格展示，以及分页按钮添加
    weixin_43872912的博客
    09-09 516
    数据条数太多显示到页面上时可能会渲染较慢，因此需要截取数据进行展示。
    广义自缩序列的伪随机性质研究
    自相关性是衡量序列中不同位置元素之间关系的一个指标，低阶自相关意味着序列在较短的时间滞后上表现出较少的相关性，这有助于提高密码系统的混淆性和安全性。这种特性使得序列在加密过程中更难以被解析，增强了密码...
    评论
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

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

    抵扣说明：

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

    余额充值