css伪类和伪元素的区别,:before和::before的区别
伪类用于选择DOM树之外的信息,或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素,比如:visited
,:active
;后者包含那些满足一定逻辑条件的DOM树中的元素,比如:first-child
,:first-of-type
,:target
。
(相当于一个特殊的class选择器,用来添加一些特殊效果)
伪元素为DOM树没有定义的虚拟元素。不同于其他选择器,它不以元素为最小选择单元,它选择的是元素指定内容。比如::before
表示选择元素内容的之前内容,也就是""
;::selection
表示选择元素被选中的内容。
(相当于一个特殊的元素(div、span),可以用来存放一些特殊样式或者内容)
在CSS3中,伪类与伪元素在语法上也有所区别,伪元素修改为以::
开头。但因为历史原因,浏览器对以:
开头的伪元素也继续支持,但建议规范书写为::
开头。
- 伪类
Selector | Meaning | CSS |
---|---|---|
:active | 选择正在被激活的元素 | 1 |
:hover | 选择被鼠标悬浮着元素 | 1 |
:link | 选择未被访问的元素 | 1 |
:visited | 选择已被访问的元素 | 1 |
:first-child | 选择满足是其父元素的第一个子元素的元素 | 2 |
:lang | 选择带有指定 lang 属性的元素 | 2 |
:focus | 选择拥有键盘输入焦点的元素 | 2 |
:enable | 选择每个已启动的元素 | 3 |
:disable | 选择每个已禁止的元素 | 3 |
:checked | 选择每个被选中的元素 | 3 |
:target | 选择当前的锚点元素 | 3 |
:first-of-type | 选择满足是其父元素的第一个某类型子元素的元素 | 3 |
:last-of-type | 选择满足是其父元素的最后一个某类型子元素的元素 | 3 |
:only-of-type | 选择满足是其父元素的唯一一个某类型子元素的元素 | 3 |
:nth-of-type(n) | 选择满足是其父元素的第n个某类型子元素的元素 | 3 |
:nth-last-of-type(n) | 选择满足是其父元素的倒数第n个某类型的元素 | 3 |
:only-child | 选择满足是其父元素的唯一一个子元素的元素 | 3 |
:last-child | 选择满足是其父元素的最后一个元素的元素 | 3 |
:nth-child(n) | 选择满足是其父元素的第n个子元素的元素 | 3 |
:nth-last-child(n) | 选择满足是其父元素的倒数第n个子元素的元素 | 3 |
:empty | 选择满足没有子元素的元素 | 3 |
:in-range | 选择满足值在指定范围内的元素 | 3 |
:out-of-range | 选择值不在指定范围内的元素 | 3 |
:invalid | 选择满足值为无效值的元素 | 3 |
:valid | 选择满足值为有效值的元素 | 3 |
:not(selector) | 选择不满足selector的元素 | 3 |
:optional | 选择为可选项的表单元素,即没有“required”属性 | 3 |
:read-only | 选择有"readonly"的表单元素 | 3 |
:read-write | 选择没有"readonly"的表单元素 | 3 |
:root | 选择根元素 | 3 |
伪元素
Selector Meaning CSS ::first-letter 选择指定元素的第一个单词 1 ::first-line 选择指定元素的第一行 1 ::after 在指定元素的内容前面插入内容 2 ::before 在指定元素的内容后面插入内容 2 ::selection 选择指定元素中被用户选中的内容 3
:before和::before的区别
二者写法是等效的,都表示伪元素。
:before是CSS2的写法,::before是CSS3的写法。
:before的兼容性比::before兼容性好,但是H5开发中建议使用::before
注意:
伪元素要配合content属性一起使用
伪元素不会出现在DOM中,所以不能通过js来操作,仅仅是在 CSS 渲染层加入
伪元素的特效通常要使用:hover伪类样式来激活
.test:hover::before { /* 这时animation和transition才生效 */ }
参考地址:https://www.cnblogs.com/ammyben/p/8012747.html
https://blog.csdn.net/yangxiaoyanger/article/details/79712180
css伪类和伪元素的区别,:before和::before的区别的更多相关文章
- CSS 属性 - 伪类和伪元素的区别
伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: ①写法不一样: ...
- 详解 CSS 属性 - 伪类和伪元素的区别[转]
首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...
- 详解 CSS 属性 - 伪类和伪元素的区别(再也不用概念盲了!!!)
首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...
- 《转载》详解 CSS 属性 - 伪类和伪元素的区别
首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...
- css中伪类与伪元素的区别
一:伪类:1:定义:css伪类用于向某些选择器添加特殊效果. 伪类其实与普通的css类相类似,可以为已有的元素添加样式,但是他只有处于dom无法描述的状态下才能为文档树中的元素添加样式,所以将其称为伪 ...
- 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 ...
随机推荐
- 基于mongoose 的增删改查操作
无论是基于robomongo 的可视化工具,亦或是基于 mongoose 的函数工具,只要是对 mongodb 的操作,第一步都是开启数据库. 开启mongodb 数据库 进入mongod所在目录 执 ...
- debug 工具
git blame 查看某个文件的修改记录  二分查找确定 bug 来源 启动  输入 git bisect start,启动流程 输入 git bisect bad,标记当前是错误的 输入 gi ...
- maven安装以及eclipse配置maven
详细地址: http://jingyan.baidu.com/article/295430f136e8e00c7e0050b9.html 介绍安装maven,配置Maven环境变量,同时在Eclips ...
- P2149 Elaxia的路线
P2149 Elaxia的路线 题意简述: 在一个n(n<=1500)个点的无向图里找两对点之间的最短路径的最长重合部分,即在保证最短路的情况下两条路径的最长重合长度(最短路不为一) 思路: 两 ...
- Android学习之一
- (转)用Python写堡垒机项目
原文:https://blog.csdn.net/ywq935/article/details/78816860 前言 堡垒机是一种运维安全审计系统.主要的功能是对运维人员的运维操作进行审计和权限控制 ...
- rabbit服务器挂掉以后,保证队列消息还存在(tp框架)(第三篇)
上接 第二篇 : http://www.cnblogs.com/spicy/p/7921870.html 第二篇解决了 如果其中一个worker挂掉了啦,如何保证消息不丢掉,并重新分发给其他worke ...
- switch开关
1.开关按钮 效果如下图 2.css代码 .form-switch{ display: inline-block; } .form-switch input[type="checkbox&q ...
- ES6-let、const和块级作用域
1.介绍 总的来说,ES6是在ES2015的基础上改变了一些书写方式,开放了更多API,这样做的目的最终还是为了贴合实际开发的需要.如果说一门编程语言的诞生是天才的构思和实现,那它的发展无疑就是不断填 ...
- 解决chrome,下载在文件夹中显示,调用错误的关联程序
https://blog.csdn.net/qq_32337527/article/details/81778732?utm_source=blogxgwz0