CSS之伪类和伪元素
一、概念
css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素
伪类：当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的，例如用户悬停后通过:hover来描述此元素的状态，虽然与普通的css类似，也可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以称为伪类
伪元素：伪元素用于创建一些不真实存在dom的元素，为其添加样式，例如通过:before来在一个元素前增加一个文本，并为文本增加一些样式等，虽然用户可以看到元素，但元素并不真实存在dom中。
二、使用场景
虽然CSS3标准要求伪元素使用双冒号的写法，但也依然支持单冒号的写法。为了向后兼容，建议还是使用单冒号的写法
1. 伪类使用方式,
- 伪类与a标签集合
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
默认显示：
- 伪类给列表第一个元素修改样式
<!-- 通常使用class选择器可以给元素设置样式 -->
<style type="text/css">
.firstline{
color:red;
}
</style>
<ul>
<li class="firstline">第一列</li>
<li>第二列</li>
</ul>
<!-- 使用伪类修改元素样式 -->
<style type="text/css">
ul :first-child{
color:red;
}
</style>
<ul>
<li >第一列</li>
<li>第二列</li>
</ul>
2.伪元素
- 使用伪元素给dom元素前后添加图片（:before和:after）
<style type="text/css">
h1:before {content:url(/i/w3school_logo_white.gif)}
h1:after {content:url(/i/w3school_logo_white.gif)}
</style>
<h1>This is a heading</h1>
效果图：
- :first-line，为某个元素的第一行文字使用样式。
<style type="text/css">
.h5:first-line{
color:red;
}
</style>
<body>
<div class="h5">
我是一枚切图仔我是一枚切图仔我是一枚切图仔我是一枚切图仔我是一枚切图仔我是一枚切图仔我是一枚切图仔
</div>
效果图：
- :first-letter，为某个元素中的文字的首字母或第一个字使用样式。
<style type="text/css">
.h5:first-letter{
color:red;
}
</style>
<body>
<div class="h5">
我是一枚切图仔我是一枚切图仔我是一枚切图仔我是一枚切图仔我是一枚切图仔我是一枚切图仔我是一枚切图仔
</div>
