CSS---伪类与伪元素的区别
- 在CSS中对于伪类和伪元素并没有做出很明显的区别定义,两者的语法是一样的,都是以 : 开头,这样导致我们将一些伪元素误认为伪类,如
:before
:after
而在CSS3中给出了明显的定义。
☞ 定义:
- 伪类
伪类用于选择DOM树之外的信息,或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素,比如:visited,:active;后者包含那些满足一定逻辑条件的DOM树中的元素,比如:first-child,:first-of-type,:target。
- 伪元素
伪元素为DOM树没有定义的虚拟元素。不同于其他选择器,它不以元素为最小选择单元,它选择的是元素指定内容。比如::before表示选择元素内容的之前内容,也就是"";::selection表示选择元素被选中的内容。
☞ 语法:
在CSS3中,伪类与伪元素在语法上也有所区别,伪元素修改为以::开头。但因为历史原因,浏览器对以:开头的伪元素也继续支持,但建议规范书写为::开头。
- 伪类一览表:

- 伪元素一览表:

CSS---伪类与伪元素的区别的更多相关文章
- CSS 属性 - 伪类和伪元素的区别
伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: ①写法不一样: ...
- 详解 CSS 属性 - 伪类和伪元素的区别[转]
首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...
- 详解 CSS 属性 - 伪类和伪元素的区别(再也不用概念盲了!!!)
首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...
- 《转载》详解 CSS 属性 - 伪类和伪元素的区别
首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...
- css中伪类与伪元素的区别
一:伪类:1:定义:css伪类用于向某些选择器添加特殊效果. 伪类其实与普通的css类相类似,可以为已有的元素添加样式,但是他只有处于dom无法描述的状态下才能为文档树中的元素添加样式,所以将其称为伪 ...
- css伪类和伪元素的区别,:before和::before的区别
伪类用于选择DOM树之外的信息,或是不能用简单选择器进行表示的信息.前者包含那些匹配指定状态的元素,比如:visited,:active:后者包含那些满足一定逻辑条件的DOM树中的元素,比如:firs ...
- CSS - 伪类和伪元素的区别
伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: CSS伪类 (P ...
- css中伪类和伪元素的区别
转载:http://www.cnblogs.com/ihardcoder/p/5294927.html CSS3伪类和伪元素的特性和区别 前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常 ...
- CSS 属性 :before && :after的用法,伪类和伪元素的区别
一::before && :after的用法 :before 如同对伪元素的名称一样,:before 是用来给指定的元素的内容前面插入新的内容.举例说明: .before:before ...
- CSS之 :before && :after的用法,伪类和伪元素的区别
一::before && :after的用法 :before 如同对伪元素的名称一样,:before 是用来给指定的元素的内容前面插入新的内容.举例说明: .before:before ...
随机推荐
- Flutter
2015年, Google 内部开始测试另一种高性能的编程方式,那就 Google 的 Sky 项目.Sky 项目使用网页开发语言Dart开发原生Android 应用,强调应用的运行速度和与 Web ...
- SSIS - 3.变量
跟其他变成语言一样,SSIS包中的变量是用来存储临时值的,变量使得整个SSIS包使用起来更加灵活.比如,我们可以遍历一个文件夹来获取文件夹下的所有文件的名称并把名称存储到一个变量中以便进一步处理.在S ...
- [Swift]LeetCode294. 翻转游戏之 II $ Flip Game II
You are playing the following Flip Game with your friend: Given a string that contains only these tw ...
- Spring Boot: Yaml配置文件 以及 @ConfigurationProperties属性获取
Yaml配置文件 概述 Spring Boot在支持application.properties配置文件的同时,也支持application.yaml配置文件. 配置文件中的属性,可以通过: 通过@V ...
- 微信公众号的开发 Senparc.Weixin.dll使用
项目需要,做个微信公众号,之前从未做过,前期挺懵的,再次记录一下,一切困难都是纸老虎(哈哈) 服务号是公司申请的微信公共账号,订阅号是个人申请的.建议开发者自己申请一个测试账号,方便使用,但是测试账号 ...
- python高级-生成器(17)
1. 什么是⽣成器 通过列表⽣成式,我们可以直接创建⼀个列表.但是,受到内存限制,列表容量肯定是有限的.⽽且,创建⼀个包含100万个元素的列表,不仅占⽤很⼤的存储空间,如果我们仅仅需要访问前⾯⼏个元素 ...
- 利用Grafana展示zabbix数据
一.系统搭建(以Centos7为例)因为我们的主要目的是展示zabbix的数据,所以建议大家直接在zabbix的服务器上搭建这个系统,亲测两系统无冲突,这样部署的好处是两系统间的数据传输更快,前端展示 ...
- 并发编程(十六)——java7 深入并发包 ConcurrentHashMap 源码解析
以前写过介绍HashMap的文章,文中提到过HashMap在put的时候,插入的元素超过了容量(由负载因子决定)的范围就会触发扩容操作,就是rehash,这个会重新将原数组的内容重新hash到新的扩容 ...
- IdentityServer4实战 - API与IdentityServer的交互过程解析
开局一张图,内容全靠看.如有不明白的地方可在评论里说出,后面我再加上.
- 那些令人惊艳的TensorFlow扩展包和社区贡献模型
随着TensorFlow发布的,还有一个models库(仓库地址:https://github.com/tensorflow/models),里面包含官方及社群所发布的一些基于TensorFlow实现 ...