CSS 引入伪类和伪元素概念是为了格式化文档树以外的信息. 也就是说: 伪类和伪元素是用来修饰不在文档树中的部分. 比如, 一句话中的第一个字母, 或者是列表中的第一个元素.
伪类和伪元素的具体概念如下:
伪类: 用于已有元素处于某种状态时为其添加对应的样式, 这个状态是根据用户行为而动态变化的.
例如: 当用户悬停在指定元素时, 可以通过: hover 来描述这个元素的状态, 虽然它和一般 CSS 相似, 可以为已有元素添加样式, 但是它只有处于 DOM 树无法描述的状态下才能为元素添加样式, 所以称为伪类.
伪元素: 用于创建一些不在 DOM 树中的元素, 并为其添加样式. 例如, 我们可以通过: before 来在一个元素之前添加一些文本, 并为这些文本添加样式, 虽然用户可以看见这些文本, 但是它实际上并不在 DOM 文档中.
2, 伪类和伪元素的区别:
请看下面例子:
例一:
- <ul>
- <li > 第一列</li>
- <li > 第二列</li></ul>
如果我们想要给第一列添加样式, 我们可以通过以下两种方式:
(1)给第一列添加一个类, 并在该类中定义样式:
- <ul>
- <li class="first-item">第一列</li>
- <li > 第二列</li></ul>.first-item{color:orange;}
(2)如果不用添加类的方法, 我们可以通过给第一个 < li > 设置: first-child 伪类来为其添加样式, 这时, 被修饰的 li 依然存在于 DOM 树中
- <ul>
- <li > 第一个</li>
- <li > 第二个</li></ul>li:first-child{color:orage;}
例二:
<p>Hello World, and wish you have a good day!</p>
想要给该段落第一个字母添加样式, 可以有以下方法:
(1)給第一个字母包裹 < span > 元素, 并给 span 设置样式:
<p><span class="first">H</span>ello World, and wish you have a good day!</p>.first{color:red;}
(2)如果不创建 < span > 元素, 我们可以通过给 < p > 元素设置 P:first-letter 伪元素为其添加样式, 这时看起来像创建了一个虚拟的 span 元素并为其添加样式, 但实际上在 DOM 数中并不存在这个 span 元素
<p>Hello World, and wish you have a good day!</p>p:first-letter{color:red;}
从上述例子中我们可以看出: 伪类的操作对象是文档树中已有的元素, 而伪元素则创建了一个文档树外的元素. 因此, 伪类与伪元素的区别在于: 有没有创建一个文档树之外的元素.
css3 规范中要求使用双冒号 (::) 表示伪元素, 以此来区分伪类和伪元素, 比如::before 和::after 等伪元素使用双冒号 (::),:hover 和: active 伪类使用单冒号(:). 除了一些低于 IE8 版本的浏览器外, 大部分浏览器都支持伪元素的双冒号(::) 表示方法.
然而除了少部分伪元素如::backdrop 必须使用双冒号(::), 大部分伪元素都支持单冒号和双冒号的写法, 比如::after, 写成: after 一样可以正常运行.
w3c 标准中说到, 虽然 CSS3 标准要求伪元素使用双冒号的写法, 但也依然支持单冒号的写法. 为了向后兼容, 我们建议你在目前还是使用单冒号的写法.
来源: http://www.css88.com/qa/css3/11853.html