欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css,css3中的伪类与伪元素区别总结

程序员文章站 2022-04-30 23:32:13
...
在学习CSS的过程中,特别容易搞混淆两个概念:伪类和伪元素。w3c中对两者的定义为:CSS 伪类用于向某些选择器添加特殊的效果。CSS 伪元素用于将特殊的效果添加到某些选择器。伪类一开始单单只是用来表示一些元素的动态状态,典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。伪元素则代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。下面就来聊聊CSS以及CSS3中伪类与伪元素的区别。

可以先学习相关的免费课程

1. 《CSS3从入门到精通教程》 css3伪类选择器 课程

css,css3中的伪类与伪元素区别总结

2. 《黑马程序员css视频教程》伪类和伪元素 相关视频教程

css,css3中的伪类与伪元素区别总结

伪类与伪元素的区别

1. 关于CSS3中的伪类与伪元素的区别及注意事项

CSS3中的标准是伪类使用单冒号“:” 而伪元素使用双冒号“::”(避免混淆) 但是在此之前无论是伪类还是伪元素都使用单冒号“:” 所以为了保证兼容伪元素两种使用方法都是可以的
但是低版本IE有双冒号兼容问题 ,所以以前编写样式的人们对于伪类和伪元素就干脆统统使用单冒号 ,导致这种混淆一直延续下来。

2. CSS伪类和伪元素的区别

伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,这也是为什么他们一个称为伪类,一个称为伪元素的原因。伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。

3. CSS中的伪类与伪元素及二者间的区别说明

CSS伪类(Pseudoclasses)是选择符的螺栓,用来指定一个或者与其相关的选择符的状态。它们的形式是selector:pseudoclass{property:value;},简单地用一个半角英文冒号(:)来隔开选择符和伪类。
CSS很多的建议并没有得到浏览器的支持,但有四个可以安全使用的用在连接上的CSS伪类。link用在为访问的连接上。visited用在已经访问过的连接上。hover用于鼠标光标置于其上的连接。active用于获得焦点(比如,被点击)的连接上。

4. CSS中的伪元素及其与伪类的区别示例介绍

我们知道随着CSS规范进一步完善,新增的CSS伪元素越来越多,但是在日常开发中,我们常用的及浏览器支持情况比较乐观的当数before和after了。但是我们在日常开发中使用的都是:after {content: ”;}来清除浮动,及新增一个元素(照顾到IE8浏览器这里使用单冒号)。但是content的可取值有哪些呢?

5. css常用属性伪元素和伪元素的总结

伪类一开始只是用来表示一些元素的动态状态,典型的就是大家常用的链接的各个状态(link、active、hover、visited),随后css2标准
扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无标识的“幽灵”分类。

伪元素则代表了某个元素的的子元素,这个子元素虽然逻辑上存在,但是并不实际上存在于文档树中,如我们平时用的after、before等。

6. 浅谈CSS的伪类与伪元素

伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id、class、属性等静态的标志。由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。

相关问答

1. 伪类和伪元素区别?

【相关推荐】

1. 免费视频教程:《php.cn独孤九贱(2)-css视频教程》

2. 免费教程:CSS 3.0参考手册

以上就是css,css3中的伪类与伪元素区别总结的详细内容,更多请关注其它相关文章!