CSS伪类总结-工具盒子

个人用伪类在布居中比较频繁，因为觉得能用CSS完成的动画，尽量不用JS，总觉得JS或多或少会影响页面加载速度和流畅度，个人觉得比较经典，其中也有很多平常开发中遇到的一些小问题，也终于有了解释，所以写篇文章总结下。

伪类？

先来回顾伪类的使用方法，类/标签名:伪类类型便可以构造一个伪类：

selector:pseudo-class {
    property: value;
    ...
}

.class:pseudo-class {
    property: value;
    ...
}

常用的伪类：hover、active、visited、link、first-child、last-child、nth-child(n)等等。

小问题

问题1

现在一个页面，需要实现a标签不同伪类下颜色不同，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Pseudo - Secret Blog</title>
    <style type="text/css">
        a:hover {
            color: red;
        }

        a:visited {
            color: blue;
        }

        a:link {
            color: green;
        }

        a:active {
            color: yellow;
        }
    </style>
</head>
<body>
    <a href="#">Click it!</a>
</body>
</html>

效果演示：Pseudo - Secret Blog

有错么？代码看起来没错呀，我hover去哪儿呢？之前也遇到过类似的问题，代码没错啊，怎么没效果呢？

W3C中提到（CSS 伪类）：

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
提示：伪类名称对大小写不敏感。

上面提到hover必须放到link和visited之后，而active又要放到hover之后，所有正确的书写顺序是：link -> visited -> hover -> active。

问题2

first-child和last-child非常好用，使用方式各式各样，一般用于修改第一个或者最后一个的样式，下列代码大家来分析下，看看有什么错误：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Child - Secret Blog</title>
    <style type="text/css">
        ul li:first-child{
            color: red;
        }
        ul li:nth-child(2){
            color: blue;
        }
        ul li:nth-child(3){
            color: yellow;
        }
        ul li:last-child{
            color: green;
        }
    </style>
</head>
<body>
    <ul>
        <p>List</p>
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
        <li>Last</li>
        <p>List End</p>
    </ul>
</body>
</html>

效果演示：child - Secret Blog

和预想的效果有差异？第一个不是红色字体而是是蓝色呢？第二个不是蓝色又是黄色的，还有最后一个的绿色也没了。

W3C解释（原文地址）：

利用 :first-child 这个伪类，只有当元素是另一个元素的第一个子元素时才能匹配。例如，p:first-child 会选择作为另外某个元素第一个子元素的所有 p 元素。一般可能认为这会选择作为段落第一个子元素的元素，但事实上并非如此，如果要选择段落的第一个子元素，应当写为 p > *:first-child。

只有当元素是另一个元素的第一个子元素时才能匹配，通俗的讲，就是上面代码里，div li:frist-child并不是指向下面ul中的第一个li，因为li并不在ul中的一个元素。last-child同理。

而nth-child的指向，仔细看一下就会发现，如果将p标签作为第一个的话，那么颜色就没错。而浏览器也正是这样解析的。