W3C关于伪类伪元素的定义
- 伪类:用于向某些选择器添加特殊的效果。
伪元素:将特殊的效果添加到某些选择器上。
明确两点:
1 都与选择器相关
2 特殊效果,这两者描述了其他css无法描述的东西
种类
伪类:
:active、:focus、:hover、:link、:visited、:first-child(将特殊的样式添加到元素的第一个子元素)、:lang(允许创作者来定义指定的元素中使用的语言)这里注意:a标签相关的伪类的顺序::link,:visited,:hover,:active(可以用 love hate 来记忆)
伪元素:
:first-letter(将特殊的样式添加到文本的首字母)、:first-line(将特殊的样式添加到文本的首行)、:before(使用content属性在某元素之前插入某些内容)、:after(在某元素之后插入某些内容)注意:
对于:before和:after必须配合content属性使用,添加的内容不会改变文档结构,不可复制,仅仅是在CSS渲染层加入,display默认值为inline(尽量用来显示一些修饰性的内容,如图标,也可以用:after清除浮动)
伪类和伪元素的区别
以伪类中的:first-child和伪元素中的:first-letter为例:
:first-child:用于选取属于其父元素的首个子元素的指定选择器。
:first-letter:用于选取指定选择器的首字母。
<p>
<i>First</i>
<i>Second </i>
</p>
p>i:first-child{
color: red;
}
效果:
如何模拟上述效果? 添加类
<p>
<i class="first-child">First</i>
<i>Second </i>
</p>
.first-child{
color: red;
}
再看伪元素的效果及模拟:
<p>
Hello world
</p>
p:first-letter{
color: coral;
}
效果:
如何模拟上述效果?添加元素
<p>
<span>H</span>ello world
</p>
span{
color:red;
}
这也是为什么叫做伪类,为什么叫做为元素的原因。
伪元素与元素的区别
- 伪元素无法通过JS获取其DOM
- 伪元素无法通过浏览器开发者工具直接查看
- 伪元素默认是 inline
使用伪元素的注意事项
- 使用伪元素before,after必须设置content
- 使用伪元素before,after显示背景图,一定要使用display设置为块元素
- 使用伪元素before,after设置为display:inline-block,需要再次设置vertical-align:middle
总结
为了区分伪类和伪元素,CSS3明确规定伪类用一个单引号表示,伪元素用一个双引号表示。
由于兼容性问题,单引号表示伪元素仍然可以使用。