CSS3伪类和伪元素的特性和区别尤其是 ::after和::before
伪类和伪元素的理解
官方解释：
伪类一开始单单只是用来表示一些元素的动态状态，典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。
伪元素则代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
我自己的理解：
伪类，类，class是一个类，就类似class这样，表示一些元素的状态的，但是无须标识的分类。
伪元素，就是一个元素，类似p标签元素，等等，逻辑上存在，但是实际并不存在在文档树中。
另外一个简单的理解和区分就是：
伪类前面是一个冒号，为元素前面是两个冒号。E:first-child 伪类，E::first-line为元素。
特殊情况::before 和 ::after 伪元素
before 和after是在元素前面和后面添加一些元素，因此是伪元素，CSS3选择器中已经将其前面变为两个冒号了。请看：w3cselect
问题来了，那么为什么我们平时用before和after前面就一个冒号？
CSS1和CSS2中对伪类的伪元素的区别比较模糊，甚至经常有同行将:before、:after称为伪类。老的规范中，伪类和伪元素都用一个冒号，新规范为了区分，伪元素统一用两个“：：”,所以，大家注意了，往后在写css3的时候，为元素要用两个冒号，伪类用一个冒号。
伪类和伪元素的应用
我之前的css常用效果，讲了一些。
像伪元素
::-webkit-scrollbar
::selection
::-webkit-input-placeholder
::after
等等。
伪元素中用的最多的要数::after和::before了
可以用这两个伪元素做很多效果！
html
<a href="#">haorooms</a>
css
a {
position: relative;
display: inline-block;
outline: none;
text-decoration: none;
color: #000;
font-size: 32px;
padding: 5px 10px;
}
a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -20px; }
a:hover::after { content: "\5D"; right: -20px; }
其中content中可以用attr也可以用url
例如：
a：:after { content:"(" attr(href) ")"; }
h1::before { content: url(logo.png); }
伪类中用的最多的要数：nth-child()选择器了，关于nth-child()，我们看下文
nth-child()浏览器支持
IE9及以上版本，火狐，谷歌，Safari ，Opera都支持！
定义和用法
:nth-child(n) 选择器匹配属于其父元素的第 n个子元素，不论元素的类型。
n 可以是数字、关键词或公式。
例如：
p:nth-child(2)
{
background:#ff0000;
}
<body>
<h1>这是标题</h1>
<p>haorooms第一个段落。</p>
<p>haorooms第二个段落。</p>
<p>haorooms第三个段落。</p>
<p>haorooms第四个段落。</p>
</body>
上面这段代码请问那个段落颜色是红色的？
答案是“haorooms第一个段落。”颜色变成了红色！
解释：:nth-child(n) 选择器匹配属于其父元素的第 n个子元素，不论元素的类型。p:nth-child(2),P标签的父元素是body，body的第二个子元素是“haorooms第一个段落。”所以haorooms第一个段落颜色变为了红色！！！
注意
很多朋友经常把:nth-child() 和:nth-of-type()混淆。
CSS3 E:nth-of-type() 选择器的意思是“选择E同类型的同级的 第n个元素“
”
看下面的例子：
p:nth-of-type(2)
{
background:#ff0000;
}
<body>
<h1>这是标题</h1>
<p>haorooms第一个段落。</p>
<p>haorooms第二个段落。</p>
<p>haorooms第三个段落。</p>
<p>haorooms第四个段落。</p>
</body>
代码一样，我的样式仅仅是把 p:nth-child(2)改成了 p:nth-of-type(2)，现在就是“haorooms第二个段落。”颜色变成了红色。
奇偶数匹配
现在开始说说我开通说的table的tr偶数行变色的问题了。
因为table的子元素一般是tr，不会有别的，所以可以用
tr:nth-child(odd) 与 tr:nth-child(even)
当然也可以用
tr:nth-of-type(odd) tr:nth-of-type(even)
分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样；偶数(even)与(2n+0)及(2n)结果一样。
倍数写法
:nth-child(an) 【:nth-of-type(an)同理，不解释】
匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。
例子：
li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*
延伸
:nth-child(2n+1)， :nth-child(2n-3) ， :nth-child(4n+3) ，还可以 :nth-child(-an+b)也就是反向匹配。
最后，总结一下伪类与伪元素的特性及其区别：
- 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
- 伪元素本质上是创建了一个有内容的虚拟容器；
- CSS3中伪类和伪元素的语法不同；
- 可以同时使用多个伪类，而只能同时使用一个伪元素
原文出处：（略有修改）http://www.111cn.net/cssdiv/css/89321.htm
CSS3伪类和伪元素的特性和区别尤其是 ::after和::before的更多相关文章
- CSS3伪类和伪元素的特性和区别
前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link.visited等,伪元素较常见的比如:before.:after等. 其 ...
- css3 -- 伪类与伪元素
伪类: 1.结构伪类 A:E : first-child{} E : nth-*(n){} E : first-*(even){} E : first-*(odd){} B:nth-child 是根 ...
- CSS3伪类和伪元素
作为一个CSS3初学不久者来说,很容易混淆单冒号(:)和双冒号(::)的用法,以为两者可以互换着来使用.我自己之前也混淆过他们,因为两者看起来太相像了,就像孪生兄弟.但实际上,他们的区别还是挺大的,最 ...
- css3怎么分清伪类和伪元素
伪类用于向某些选择器添加特殊的效果. 伪元素用于将特殊的效果添加到某些选择器. 伪类有::first-child ,:link:,vistited,:hover,:active,:focus,:lan ...
- ::before ::after CSS3中的伪类和伪元素
::before和::after伪元素的用法 一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:fo ...
- 妙味css3课程---1-2、css3中新增的伪类和伪元素有哪些
妙味css3课程---1-2.css3中新增的伪类和伪元素有哪些 一.总结 一句话总结: 1.div:target{}是什么意思? 比如a标签的锚点链接到div,div:target{}就可以找到这个 ...
- CSS3伪类与伪元素的区别及注意事项
CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别 定义 首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的 伪类:用于向某些选择器添加特殊的效果 伪元素:用于将特 ...
- css3的伪（伪类和伪元素）大合集
本文讲css3的伪,不是讲它有多虚伪,而是说它的伪元素样式.不得不说以前虽知html伪元素,但很少用,后得知借助css3伪元素可以发挥极大的便利.故总结css3的伪如下: CSS中存在一些比较特殊的属 ...
- CSS3 动态生成内容(在Web中插入内容)====CSS的伪类或者伪元素
# css3 .类:伪类::伪元素 /* CSS3伪元素/伪类 :https://www.w3.org/TR/css3-selectors/#selectors ::selection 伪元素(F12 ...
随机推荐
- UIScrollView 滚动视图—IOS开发
转自:http://blog.csdn.net/iukey/article/details/7319314 UIScrollView 类负责所有基于 UIKit 的滚动操作. 一.创建 CGRect ...
- C#实现麦克风採集与播放
在网络聊天系统中.採集麦克风的声音并将其播放出来.是最基础的模块之中的一个.本文我们就介绍怎样高速地实现这个基础模块. 一. 基础知识 有几个与声音採集和播放相关的专业术语必需要先了解一下,否则.后面 ...
- Centos Java 从1.7升级为1.8
查看安装的sdk版本 yum list installed |grep java 卸载JDK相关文件输入和tzdata-java输入 yum -y remove java-1.7.0-openjdk* ...
- OS开发UI篇—UIWindow简单介绍
一.简单介绍 UIWindow是一种特殊的UIView,通常在一个app中只会有一个UIWindow iOS程序启动完毕后,创建的第一个视图控件就是UIWindow,接着创建控制器的view,最后将控 ...
- Hadoop默认端口表及用途
端口 用途 9000 fs.defaultFS,如:hdfs://172.25.40.171:9000 9001 dfs.namenode.rpc-address,DataNode会连接这个端口 ...
- python模块之XlsxWriter 详解
Xlsx是python用来构造xlsx文件的模块,可以向excel2007+中写text,numbers,formulas 公式以及hyperlinks超链接. 可以完成xlsx文件的自动化构造,包括 ...
- web.config中的connectionString里面应该怎么写?
2009-09-16 10:19信欣玛利 | 浏览 6068 次 网络 就是具体格式.. 谁能举个例子? asp.net 3.5的. 2009-09-16 10:40 提问者采纳 这是用来连 ...
- .NET Standard - 揭秘 .NET Core 和 .NET Standard[转自MSDN]
作为 .NET 系列的最新成员,.NET Core 和 .NET Standard 的概念及其与 .NET Framework 的区别并不十分明确.在本文中,我将准确介绍每个产品及其适用场景. 在详细 ...
- Unix系统编程（）检查进程的存在
检查进程的存在 kill系统调用还有另一重功用.若将参数sig指定为0(即所谓空信号),则无信号发送. 相反,kill仅会去执行错误检查,查看是否可以向目标进程发送信号. 从另一角度来看,这意味着,可 ...
- Spring Mvc中DispatcherServlet和Servlet的区别小结
在web开发过程中开始接触的是servlet,用来处理用户请求.这几年随着spring 框架越来越成熟,几乎成了java web开发界的主流框架.既然这么受欢迎肯定有它的优点,spring框架在原来的 ...