伪元素: 在HTML文档指定的内容外,创建文档的额外信息
格式: 选择符:伪元素{属性:属性值}
常见伪元素:
:before 在元素内容的最前面添加新内容
:after 在元素内容的最后面添加新内容
:first-letter 对指定对象内第一个字符起作用(仅对块元素起作用)
:first-line 对指定对象内第一行内容起作用(仅对块元素起作用)
eg:
<style>
p:before{content:"4月1号,";}
p:after{content: ",小心被忽悠哦!"}
</style>
..............
<p>愚人节到了</p>
实际效果:
伪类:
可以用来指定一个或者多个与其相关的选择符的状态,可以让用户在使用页面的过程中增加更多的交互效果,而不必过多的使用JavaScript
格式: 选择符:伪类{属性:属性值}
常见伪类:
eg:
a:link{color:red;}/*默认状态*/
a:visited{color:blue;}/*访问过后状态*/
a:hover{color:green;}/*经过时状态*/
a:active{color:block;}/*点击时状态*/