3.css的伪类和伪元素

1 伪类和伪元素

1.1 伪类

1.1.1 定义

伪类⽤于向某些选择器添加特殊的效果

1.1.2 超链接伪类

给a链接添加⼏种状态：

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

其他常⻅的伪类选择器 :focus :checked :first-child :last-child等

1.1.3 元素获取

伪元素不是真正的元素，不存在与⽂档之中，所以 js ⽆法对它进行操作。为什么叫他“元素”？因为我们可以对其进⾏跟元素⼏乎⽆差别的操作。

:first-child  /* 第一个子元素 */
:last-child  /* 最后一个子元素 */
:only-child /* 只有一个子元素 */
:root  /* 根标签 */
:nth-child(n)   /* 第几个子元素 */
ul li:nth-child(1){color:#f00;}   /* 第一个子元素 - 从1开始 */ 
ul li:nth-child(2n){color:#f00;} /* 偶数行的子元素 - 2的倍数的所有元素 */ 
:nth-child(odd)  /* 奇数元素 */
:nth-child(even)  /* 偶数元素 */
:nth-last-child(-n+4) /* 后4个元素 */

注：nth-child( ) IE8 及更早的版本不支持

1.2 伪类

1.2.1 定义

CSS伪元素是⽤来添加⼀些选择器的特殊效果。最好使⽤双冒号，防⽌与伪类混淆

1.2.2 first-letter首字母

first-letter 伪元素⽤于向⽂本的⾸字⺟设置特殊样式：

p::first-letter {color: red;}

其他常⻅的伪元素选择器

• ::first-line 首行
• ::first-letter 首字母
• ::before 元素前插入
• ::after  元素后插入

1.2.3 before与after的⽤法总结

before定位的基准是其主元素的右上⻆，after定位的基准是主元素的结尾处。 当主元素没有内容时before与after仍会正常⼯作，属性为行内元素，若需要设置⾼宽度等属性需要首先设置为块元素。 content是伪元素必需的属性。若伪元素没有内容，需赋值为空格：content:' '; before与after的主要⽤途是对元素默认样式的的美化：美化时需要结合定位于内容。⼀般讲主元素设置为position：relative，伪元素设置为position：absolute，以⽅便对伪元素定位。

a:hover::before,
a:hover::after {
    position: absolute;
}

a:hover::before {
    content: "我是前"; left: -20px;
}

a:hover::after {
    content: "我是后"; right: -20px;
}

1.3 伪类与伪元素区别

<style>
    li.first-item {
        color: orange
    }
</style>
<ul>
    <li class="first-item">我是第一个</li>
    <li>我是第二个</li>
</ul>

如果想要给第一项添加样式，可以在为第一个

• 添加一个类，并在该类中定义对应样式

如果不用添加类的方法，我们可以通过给设置第一个

• 的:first-child伪类来为其添加样式。这个时候，被修饰的
• 元素依然处于文档树中。

<style>
    .first{
        font-size:18px;
    }
    p::first-letter {
        font-size:18px;
    }
</style>
<p><span class="first">我</span>是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落</p>

如果想要给该段落的第一个字添加样式，可以在第一个字中包裹一个元素，并设置该span元素的样式 如果不创建一个元素，我们可以通过设置 的::first-letter伪元素来为其添加样式。这个时候，看起来好像是创建了一个虚拟的元素并添加了样式，但实际上文档树中并不存在这个元素。

伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(::)，:hover和:active等伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外，大部分浏览器都支持伪元素的双冒号(::)表示方法。 除了少部分伪元素，如::backdrop必须使用双冒号，大部分伪元素都支持单冒号和双冒号的写法，比如::after，写成:after也可以正确运行。 建议使用双冒号的写法，更容易识别出是伪类还是伪元素。