以css伪类为基础,引发的选择器讨论 [新手向]

作为第一篇技术干货，来写哪个方面的内容，我着实考虑了很久。

经过了整整30秒的深思熟虑，我决定就我第一次发现新大陆一样的内容，来进行一次讨论。

1. 伪类：
   伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容；原则上特征是不可以从文档树上推断得到的。
   这是百度百科给的解释。不过，大家心里应该都有伪类的概念，看来百科也许更懵逼也说不定。所以还是直接上代码吧。
2. 简单的使用：

    <div id='ancestor'>
      <div id="father">
        <div id="son">
        </div>
      </div>
    </div>
   
    <style>
    #ancestor{
      width: 150px;
      height: 150px;
      background-color: #f00;
    }
    #father{
      width: 100px;
      height: 100px;
      background-color: #0f0;
    }
    #son{
      width: 50px;
      height: 50px;
      background-color: #00f;
    }
    #ancestor:hover{
      transform: rotate(45deg);
    }
    </style>

   这段代码，十分简单应该大家都能看的懂，效果也可以预知，下面我们就来做一点。

3. 代码变异：

    <div id='ancestor'>
      <div id="father">
        <div id="son">
        </div>
      </div>
    </div>
   
    <style>
    #ancestor{
      width: 150px;
      height: 150px;
      background-color: #f00;
    }
    #father{
      width: 100px;
      height: 100px;
      background-color: #0f0;
    }
    #son{
      width: 50px;
      height: 50px;
      background-color: #00f;
    }
    #ancestor :hover{
      transform: rotate(45deg);
    }
    </style>

   2

   或许乍一看，感觉这段代码和之前的那一段一模一样，但是其实有一个很大的区别。
   相信拷贝代码去尝试过的小伙伴们，已经开始疑惑了。那就让我开始来哔哔一波吧。
   其实仔细关注了这两段代码之后，可以发现区别实际是在 #ancestor:hover 这个选择器上。第二段代码只是多加了一个空格。
   很多同学肯定已经灵光一闪，仿佛已经明白了什么。不过，还是我来提壶（醍醐）给大家灌个顶吧！

4. 发生了什么：
   大家都知道选择器中，空格就是后代选择器。#ancestor :hover 所命中的，其实就是 #ancestor 所有后代元素的 :hover 属性。所以在 #ancestor 自身上。没有被添加到这个伪类，而 #father 、#son，被同时命中。就出现了大家所看到的效果。如果，想印证我的说法，可以使用 #ancestor>:hover 再做一次尝试. 或者再次添加更多的后代元素.看看他们是否一样有这个特殊效果。
   至于我们最通常使用的 #ancestor:hover 这一种使用的方式，实际上就是两个选择器组成的交集选择器，需要同时命中这两个条件才被适用。
   故而，我这一堆哔哔，也就是为了表明伪类、伪元素选择器，其实和我们使用的id选择器、类选择器等等常见的选择器一样，可以使用各种关系符，来组成各种奇怪而又好用的选择器。
5. 这一堆哔哔，换来的实用性：
   很多人这个时候已经在吐槽了。伪类，只有在一些特殊的场景之下才会使用到，并不会很常用。
   我想说的是，伪类，并不仅仅是 :link:，:vistited，:hover，:active 等特殊状态的。
   还有一些，比如:first-child，:last-child，:nth-child 这些指向特定元素的。
   在我们使用这些伪类时，例如 li:first-child ，会命中的是 li 标签，同时必须是他自身父级的第一个元素。所以，很多人都会加上一个类名来实现给他的效果。
   但是，如果我们这样写呢。 ul > :first-child  是不是就会显的更有语义且优雅。
   亦或者，ul > ::before  给所有的子集中增加一个小箭头

后话，哔哔了这么久。其实实用性确实不是很高。我做这一篇随笔主要意义是，希望新手能正常理解，伪类、伪元素，到底是一个什么样的东西。其实它们并不特殊，和普通的选择器是一模一样的。不需要用特殊的眼光去看待他们。也不需要觉得它们有什么特别的用法。将他们看成普通的选择器，只不过他们命中的元素是一种特殊状态。记住这一点就好。

至：所有对伪类，伪元素持懵逼状态的各位。