CSS - 伪类

1. 分类

CSS 中，伪类可以分为三类：

• 链接伪类：链接（<a> 标签）的不同状态有不同的伪类可以表示。状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
• 位置伪类：选取父元素的指定子元素时，可以使用结构伪类，包括第一个子元素，最后一个子元素，第 N 个子元素，倒数第 N 个子元素。
• 目标伪类：选取当前活动的目标元素。

2. 链接伪类

对于链接标签 <a>，有四种状态：link（活动状态，即没有点击过的链接），visited（已经访问过），hover（鼠标悬停），active（正在点击）。这四种样式，必须要按顺序（link,visited,hover,active）书写，可以记为（LOve，HAte）示例：

a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}   /* 选定的链接 */

3. 位置伪类

位置伪类也有四种：first-child（元素的第一个子元素），last-child（元素的最后一个子元素），nth-child(n)（元素的第 N 个子元素，n 可以是 even 偶数，odd 奇数），nth-last-child(n)（元素的倒数第 N 个子元素）。
注意，冒号前的元素需要写子元素。就像链接伪类作用于链接 a 一样，位置伪类作用域伪类前的那个元素。

 :first-child 伪类来选择元素的第一个子元素。
 :last-child 选择元素的最后一个子元素
 :nth-child(n) 选择元素的第 n 个元素，或符合某种公式的所有子元素
 :nth-last-child(n) 选择元素的倒数第 n 个元素，或符合某种公式的所有子元素

1. first-child

<div>
    <p> p1 </p> <!-- 这是第一个元素 -->
    <ul>
        <li>li 1</li> <!-- 这是第一个元素 -->
        <li>li 2 <strong>strong1</strong><!-- 这是第一个元素 --></li>
        <li>li 3</li>
    </ul>
    <p>p2-start <em> em1 </em><!-- 这是第一个元素 --> p2-end</p>
</div>

例如上面，作为第一个元素的元素包括第一个 p（属于 div 的第一个元素）、第一个 li （属于 ul）和 strong （属于 li）和 em （属于 p）元素。添加以下规则后：

p:first-child {color: red;}
li:first-child {color: red;}

上面示例中的文本 p1 和 li1 变红。

2. nth-child

可以指定一个固定数字，或指定参数 n，n 是从0开始计数并且每次增加1，直到子元素总个数减1的数字。
参数：
（2n+1） 或 odd：选择所有的第奇数个子元素（1，3，5，，，）
2n 或 even：选择所有的第偶数个子元素（0，2，4，，，）
n：选择所有的子元素（0，1，2，3，，，）

nth-child 或 nth-last-child 的参数可以使用公式，其中参数 n 表示从0开始每次增加1，直到子元素总个数减1的数字。比如参数为 2n 时，最终传给 nth-child 的参数有0，2，4，6，，，，作用于所有的第偶数个子元素。

4. 目标伪类

:active 可以选中当前激活的元素。

<style>
:active {
    color: red;
}
</style>