首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

css中的伪类与伪元素

伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,这也是为什么他们一个称为伪类,一个称为伪元素的原因。...伪类的种类 伪元素的种类 区别 这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。...p>i:first-child {color: red} first second i标签的第一个元素,也就是first,颜色会变红。... 总结 伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。...:Pseudo-classes::Pseudo-elements 但因为兼容性的问题,所以现在大部分还是统一的单冒号,但是抛开兼容性的问题,我们在书写时应该尽可能养成好习惯,区分两者。

2.5K80

CSS中的伪类和伪元素

伪元素 伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特定部分修改样式。 下例中的 ::first-line 伪元素可改变段落首行文字的样式。 /* 每一个 元素的第一行。...*/ p::first-line { color: blue; text-transform: uppercase; } 伪类连同伪元素一起,他们允许你不仅仅是根据文档 DOM 树中的内容对元素应用样式...这个时候,被修饰的 元素依然处于文档树中。... p:first-letter { font-size: 5em; } 从上述例子中可以看出,伪类的操作对象是文档树中已有的元素,而伪元素则创建了一个文档数外的元素。...总结 1.伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息; 2.伪元素本质上是创建了一个有内容的虚拟容器; 3.CSS3中伪类和伪元素的语法不同; 4.可以同时使用多个伪类,而只能同时使用一个伪元素

2.8K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    2022 最受欢迎的 CSS 伪类、伪元素分别是什么

    每一年,我们都看到CSS的规模在增长,2022年也不例外。 今天,我们来看一上,2022 最受欢迎的 CSS 伪类、伪元素分别是什么。...2022最受欢迎的伪类占比 用户动作伪类 :hover, :focus, 和 :active 再次位列前三。否定伪类 :not()以及 :root 也继续流行,可能用于创建自定义属性。...去年,人们注意到 :focus-visible,一种以更符合用户期望的方式来设计焦点元素的方式,出现在不到1%的页面中。...它们通常用于选择浏览器的界面组件或元素,我们对开发人员实际使用的伪元素感兴趣。 自去年以来,::before和::after的使用有所增加。这些都是用来在文档中插入生成的内容。...代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

    64340

    CSS中的伪类

    CSS中的伪类 引言 CSS(Cascading Style Sheets,层叠样式表)是Web开发中不可或缺的一部分。它用于控制网页的外观和布局,使得网页不仅功能强大,还具有吸引力。...在CSS中,伪类(Pseudo-classes)是一种强大的工具,能够选择和样式化那些在普通选择器无法触及的元素状态或特性。本文将深入探讨CSS中的伪类,分析其重要性、应用场景和具体实现方法。...样式应用器:将匹配元素的样式规则应用到元素上。 伪类的实现步骤和流程 解析CSS选择器:浏览器解析CSS文件,识别选择器中的伪类。 匹配元素:浏览器在文档中查找符合伪类条件的元素。...行业趋势与未来展望 当前行业中的地位 CSS伪类在现代Web开发中占据重要地位,广泛应用于各种项目中。随着CSS标准的不断发展,伪类的功能和种类也在不断扩展。...结论 本文详细探讨了CSS中的伪类,包括其基本概念、核心原理、常见伪类、高级伪类、性能优化、安全考量和实际应用案例。伪类是CSS中强大的工具,能够选择和样式化那些在普通选择器无法触及的元素状态或特性。

    14910

    Hammersley序列的对比实现伪代码

    Hammersley序列的对比实现伪代码 复制代码12345678910111213141516171819202122CPPdouble make_halton_sequence(int index,...所以需要采用Scrambling解决这个问题 RadicalInverse的实现的效率依赖于一个循环,将索引Index的数字左右颠倒。...序列的介绍与实现可参考这篇: 低差异序列 (low-discrepancy sequences)之Hammerysley在半球中采样点方法的介绍 Halton序列无需在生成随机数之前,知道需要生成随机点的个数...,但是在用一些比较大的质数作为底数时,Halton序列的分布在点的数量不那么多的时候并不会均匀的分布,只有当点的数量接近底数的幂的时候分布才会逐渐均匀 效果对比 Halton序列比一般的伪随机数更加地分布均匀...,因为此处是没有对Halton进行优化的,即没有Scrambling,可从另一幅图看到,Hammersley序列比未优化的Halton序列相对来说更加地均匀,但未优化的效果也可以说是比较不错的了

    99200

    Java 中的伪异步 IO

    本文简单介绍 Java 中的 伪异步 IO 知识。 1 伪异步 IO 通信模型 伪异步 IO 通信模型如下图所示: ?...上篇文章中 Java BIO 认识 介绍了 BIO 的弊端,就是服务端会对每个客户端的请求单独创建一个线程来处理,这样子很浪费资源,特别是高并发的时候,资源容易被耗尽导致宕机。...下面代码实现如果客户端发送的内容是 current time,则返回当前的时间。 ? BioServerHandlerExecutePool 为执行任务的线程池。任务通过线程池来执行。 ?...3 伪异步 IO 弊端 伪异步解决了 BIO 的资源占用问题,但是依旧没有解决 IO 阻塞问题,因为 InputStream 中的 read() 方法读取数据时,它是一直阻塞的,直到发生有数据可读、...OutputStream 中的 write() 方法也是阻塞的。 做个有梦想的程序猿

    1.3K40

    用伪代码理解浏览器中的事件冒泡以及捕获

    写在前面的 这里都是胡说的,错了勿怪 开撸代码 首先,当页面渲染好之后,我们的页面是一个dom树 ? 浏览器会获取到每一个节点的位置和宽度、高度。...,浏览器知道的只是用户点 击的位置的x,y坐标,浏览器这个时候就开始从dom树的根开始寻找,(这里是捕获的 开始),x,y是否在根的位置上,根有没有注册点击事件?...如果事件是捕获注册的,那么执行这个事件处理函数,在该函数中,判断是否有 event.stopPropagation()来阻止事件的捕获,若阻止了,那么该点击事件的整个过程就完 成了,不论子节点是否注册了点击事件都不会执行到的...在回 去的过程中,判断每个节点是否注册了点击事件,是否是冒泡注册的,如果是冒泡注册的 事件,那么就执行,执行过程中如果发生了event.stopPropagation(),那么整个点击事件 就结束了...以下是伪代码 while (true) { ...

    67820

    CSS 中的 :root 伪类介绍

    bug收集:专门解决与收集bug的网站 网址:www.bugshouji.com 今天为大家介绍: css中的 :root 伪类的使用 1....:root 介绍 :root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说,:root 表示 元素,除了优先级更高之外,与 html 选择器相同 mdn 2....:root的应用场景 应用1:类似html 选择器, 指定样式 /* 选择文档的根元素(HTML中的 ) */ :root { background: yellow; } 应用2:申明css...CSS 变量时 :root 会很有用: :root { --main-color: hotpink; --pane-padding: 5px 42px; } 通过var()函数,使用:root中定义的变量...body { background-color: var(--main-hotpink); /* 设置背景颜色 */ } 【更多关于css变量的文章,请看下文】 css自定义属性(css变量

    1.7K30

    Web前端,认识css,css规格,伪类和伪元素的用法,代码详解!

    认识 CSS — Cascading Style Sheets CSS的世界是神奇的。随着浏览器WEB标准的日趋统一,CSS在WEB世界中的扮演的角色也越来越重要。...当浏览器遇到开标签时,浏览器会再次切换成为解析HTML代码 CSS规则 构成CSS规则有很多,主要就是选择器。这里我们只需要掌握常用的选择器,碰到特殊的再去查询。...id 的用途是在页面标记中唯一地标识一个特定的元素。 类是可以应用给任意多个页面中的任意多个 HTML 元素的公共标识符 。...我们在chrome、firfox开发者工具中任意右键点击一个元素会看到一个菜单。接下来我们介绍一下伪类。Are you ready ? 链接伪类 在浏览器中样式的时候它们可以帮助我们快速的进行变换。...其它伪类、结构伪类 focus 获取焦点,表单中使用 target(不常用) 当用户点击一个指向页面中其它元素(target)的链接时,可以通过此伪类选择 first-child、last-child

    1.3K60

    前端 | CSS 伪元素、伪类是什么?他们的区别在哪里你知道吗?

    一、伪元素和伪类介绍 什么是伪元素? 伪元素 是一个附加至选择器末的关键词,允许你对被选择元素的特定部分修改样式。 eg:下例中的 ::first-line伪元素可改变段落首行文字的样式。...一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。 按照规范,应该使用双冒号(::)而不是单个冒号(:),以便区分伪类和伪元素。...二、伪元素和伪类的区别 伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id、class、属性等静态的标志。...与伪类针对特殊状态的元素不同的是,伪元素是对元素中的特定内容进行操作,它所操作的层次比伪类更深了一层,也因此它的动态性比伪类要低得多。...它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。

    1.2K30

    J2EE是什么?和JavaEE的是什么关系?「建议收藏」

    首先,现在很多人看到 J2EE会比较懵圈,因为接触的Java一般是JavaSE和JavaEE,其实J2EE在JDK5.0之后改名为了JavaEE,J2SE改为了Java SE,只是名字上的一个更改而已...Java分三个版本: JavaSE(标准版)、JavaEE(企业版)、JavaME(微型版) ,其中JavaSE 是Java编程语言的基础, JavaEE是用于公司的PC端开发的,而JavaME是用于移动端开发的...那么Java EE呢,是java面向企业级的版本,主要面向是Web应用,尤其是企业级的开发,并且Java EE 都提供了一套开发的流程。...JavaEE是在JavaSE的基础上构建的,它提供Web服务、组件模型、管理和通信API ,可以用来实现企业级的面向服务体系结构( service-orientedarchitecture , SOA...如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    1.4K11

    Python代码中的if name == ‘__main__‘的作用是什么

    工程后,新建两个py文件,文件名分别为AAA.py和BBB.py 然后在AAA.py中写上如下代码: print('当前AAA.py中__name__的值为:', __name__) 在BBB.py...中写上如下代码: import AAA 然后分别运行这两个Python文件,结果如下:运行AAA.py的结果如下: 运行BBB.py的结果如下: 这个示例除了应证了上面说的py文件的两种使用方式...,还表明使用import导入py文件/模块时,这个被导入的py文件中没有缩进的代码会被全部执行一遍。...'\n') print('当前AAA.py中__name__的值为“{}”'.format(__name__)) if __name__ == '__main__': print('\n')...那么通常来说哪些代码不希望被执行呢?当文件被作者定义为一个模块时,里面难免含有一些测试代码,当模块被import时,这些代码是不希望被执行的。

    47010

    伪元素的作用_获取iframe中的元素

    大家好,又见面了,我是你们的朋友全栈君。...目标网站红薯中文网 获取网页源代码也获取不了这些动态渲染的数据 所以用简单的,但是有点麻烦的方法 使用selenium执行js,或者直接在浏览器里面执行js function kkk(){...} kkk() 另外,还有大部分的数据是加密的,也很简单 function long2str(v, w) { var vl = v.length; var sl = v[vl - 1] & 0xffffffff...,但是解密够了,connt_data就是需要解密的参数 76980100是上一个请求获取的解密密钥 套用即可 解密之后,里面的参数是对应的 context_kw11 这个就是对应的伪元素的class...如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    7K30

    Springboot中slf4j+log4j2的使用

    Springboot中slf4j+log4j2的使用 0.简介 slf4j: 日志门面 log4j2: 日志实现 我要是直接用log4j2打日志当然可以,但是我想换的时候,就需要修改很多代码....比如说导入的日志类啊,logger的声明啊等等. 但是我可以让slf4j来做,slf4j是多个日志框架的上层,大家都基于slf4j来做....这样,要切换具体的日志框架时,只用换个依赖那些就好了, 代码之类的不用任何修改....)", msgId, JSON.toJSONString(sxResponse) 5.日志级别 通过改变配置文件中的日志级别,就能打印出不同的日志. eg: 有的场景只是你在debug的时候看看,所以你代码写...在log4j2中, 共有8个级别,按照从低到高为: ALL < TRACE < DEBUG < INFO < WARN < ERROR < FATAL < OFF All:最低等级的,用于打开所有日志记录

    1.1K20

    9.java web的发展 javaweb是什么 J2EE发展历史 规范 J2EE是什么 发展背景 组件标准 J2EE好处作用 Servlet 含义 本质 发展 java在web中的发展 servl

    这个大家都知道 其中之一的J2EE,就是面向企业级开发的,但是具体的到底是什么?...这是一段经常用来描述J2EE 现在可以不用纠结上面这些到底是什么,到底怎么用 你只需要知道,它定义了一整套的技术规范 对于厂商,J2EE意味着一套开放标准,加入这个标准, 他们的产品就可以运行在各种不同的操作系统和工作环境下...,成为一个成熟的企业运算体系中可替换的部件; 对于开发者,J2EE是一套现成的解决方案,采用这个方案,企业应用开发中的很多技术难题(包括跨平台移植、事务处理、安全性等等)就会迎刃而解 J2EE也是被动出现的...3).在传统 CGI 中,如果有 N 个并发的对同一 CGI程序的请求,则该CGI程序的代码在内存中重复装载了 N 次; 而对于 Servlet,处理请求的是 N 个线程,只需要一份 Servlet 类代码...jsp页面中包含大量java代码的问题,更进一步的实现了前端展示页面与后端逻辑代码的分离 再后来为了更加彻底的分层,把jsp页面中的控制功能提取出来用servlet实现 所以,Servlet1.2出现了

    1.7K10
    领券