css3给出的伪类定义:
伪类是用来允许选择器去选择一些存在于dom之外的信息或者一些不能够通过现在的选择器进行定位信息。也就是说伪类其实是为了弥补选择器的不足,例如:
:hover
, 当鼠标悬停在一个元素上时,可以用这个伪类来为此状态下的元素添加样式。很明显,鼠标悬停在一个元素上的这些信息,并不存在与dom树中。:first-child
, 要获取第一个子元素,无法通过常规选择器直接获取,这时候就可以使用伪类:first-child
li:first-child {
color: #ee5588;
}
<ul>
<li>1111</li>
<li>22222</li>
<li>33333</li>
</ul>
css3给出的伪元素定义:
大概意思为:伪元素可以创建一些dom无法创建的元素。比如,dom并没有一种机制可以访问一个元素的第一行或者第一个字母,但是伪元素可以做到。并且伪元素还可以创建不存在于源文档中的元素 比如::after
和::before
还有一个不同是,一般情况下伪类用单冒号表示:hover
, 伪元素则用双冒号表示::after
, 但是在IE8中,浏览器只支持单引号,这也就是为什么利用伪元素after清除浮动的时候都是:after
这种写法。