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

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

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

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

    1 <div id='ancestor'>
    2   <div id="father">
    3     <div id="son">
    4     </div>
    5   </div>
    6 </div>
    7 
    8 <style>
    9 #ancestor{
   10   width: 150px;
   11   height: 150px;
   12   background-color: #f00;
   13 }
   14 #father{
   15   width: 100px;
   16   height: 100px;
   17   background-color: #0f0;
   18 }
   19 #son{
   20   width: 50px;
   21   height: 50px;
   22   background-color: #00f;
   23 }
   24 #ancestor:hover{
   25   transform: rotate(45deg);
   26 }
   27 </style>

   View Code

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

3. 代码变异：
   
   

    1 <div id='ancestor'>
    2   <div id="father">
    3     <div id="son">
    4     </div>
    5   </div>
    6 </div>
    7 
    8 <style>
    9 #ancestor{
   10   width: 150px;
   11   height: 150px;
   12   background-color: #f00;
   13 }
   14 #father{
   15   width: 100px;
   16   height: 100px;
   17   background-color: #0f0;
   18 }
   19 #son{
   20   width: 50px;
   21   height: 50px;
   22   background-color: #00f;
   23 }
   24 #ancestor :hover{
   25   transform: rotate(45deg);
   26 }
   27 </style>

   View Code 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  给所有的子集中增加一个小箭头

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

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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有