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 ...
随机推荐
- KMP算法与传统字符串寻找算法
原理:KMP算法是一种模板匹配算法,它首先对模板进行便利,对于模板中与模板首字符一样和首字符进行标志-1,对于模板匹配中出现不匹配的若是第一轮检查标志为0,若不是第一轮检查标志为该元素与标志为-1的距 ...
- B4 and After: Managing Hierarchy, Partitioning, and Asymmetry for Availability and Scale in Google’s Sofware-Defined WAN
B4及之后:为谷歌软件定义WAN的可用性和扩展管理层次化.划分和不对称 本文为SIGCOMM 2018会议论文,由谷歌提供. 笔者翻译了该论文.由于时间仓促,且笔者英文能力有限,错误之处在所难免:欢迎 ...
- android颜色color.xml设置
XML Code 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 ...
- Html5视频播放器-VideoJS+Audio标签实现视频,音频及字幕同步播放
一,VideoJS介绍 引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站 <link href=”http://vjs.zencdn.net/c/video ...
- SDL 开发实战(二):SDL 2.0 核心 API 解析
在上一篇文章 SDL 开发实战(一):SDL介绍及开发环境配置 中,我们配置好了SDL的开发环境,并成功运行了SDL的Hello World 代码.但是可能大部分人还是读不太明白具体Hello Wol ...
- [Swift]LeetCode84. 柱状图中最大的矩形 | Largest Rectangle in Histogram
Given n non-negative integers representing the histogram's bar height where the width of each bar is ...
- [Swift]LeetCode226. 翻转二叉树 | Invert Binary Tree
Invert a binary tree. Example: Input: 4 / \ 2 7 / \ / \ 1 3 6 9 Output: 4 / \ 7 2 / \ / \ 9 6 3 1 Tr ...
- [Swift]LeetCode424. 替换后的最长重复字符 | Longest Repeating Character Replacement
Given a string that consists of only uppercase English letters, you can replace any letter in the st ...
- [Swift]LeetCode678. 有效的括号字符串 | Valid Parenthesis String
Given a string containing only three types of characters: '(', ')' and '*', write a function to chec ...
- Qt创建堆叠窗口
1.QT创建堆叠窗口使用类,但是使用它时主窗口不能是MainWindow,否则会出现布局错误,本例中使用基类为QDialog QStackedWidget 2.可以配合列表框QListWidget和Q ...