伪类和伪元素的区别，以及伪元素的妙用（上）

伪类到底是什么呢，与伪元素又有啥关联呢

小白程序员-博客第二篇

说到伪类和伪元素呢，这里可能就跟读者们唠叨一下啦，伪类和伪元素到底有什么渊源呢，上面文章说到伪元素可以清除浮动，其实呀，伪元素的功能不止于此，它还有好多其他的骚操作呢，我们先从区别开始讲起哈

到底啥是伪类呢

很多网站给了一句话，用于向某些选择器添加特殊的效果，太含蓄简洁啦，我压根就没懂
所以整理了一下，一般伪类，用的比较多的是结构化伪类和状态伪类，看到这两个千万别怕，其实不难，话不多说，一个个开刀，我们先看状态伪类，上图

是不是有种熟悉的感觉，这不就是我们平常的用的在元素上加个:hover ，简称:摸一下

//html代码
<div class="test_hover"></div>

//css代码
.test_hover {
    border: 1px solid black;
    width: 200px;
    height: 200px;
}
.test_hover:hover {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);//增加边框阴影
}

其他的:active用于点击那个元素 （这个属性在移动端需要一些处理，先了解着，以后再说）
:visited用于链接的，与那个:link 形成对应的，比如说链接被点之前，也就是被访问之前，那就是link来决定它的属性，如果被点了呢，那就是visited啦，字面意思理解就好啦
:focus这个经常用于表单
不过呢，这几个伪类的叠加的使用上，要有着”love hate“的原则呀
具体是怎样呢，瞧我跟你解释下，如果这几个伪类的顺序没搭配好呀，会根据css最后的一个属性进行覆盖，话不多说，上代码如下

a:link {
    color: blue;
}
a:hover {
    color: black;
}
a:active {
    color: gold;
}
a:visited {
    color: red;
}

当你鼠标移上去之后，确实会变色，但是点完之后就只会变成红色，因为visited在css最后面,css肯定选取最后一个嘛，那再去点a标签，它压根就不想理你，不想变色。所以有一个顺序，love hate是什么意思 l就是link ,o是过渡，为了好记，v就是visited, e就是过渡， h就是hover啦 ，a就是active，其他的是过渡。因此，正确顺序就是如下

a:link {
    color: blue;
}
a:visited {
    color: red;
}
a:hover {
    color: black;
}
a:active {
    color: gold;
}

所以当你使用这么多个伪类的时候，你要小心啦，当心他们的顺序哟

好了，这就是状态伪类啦，其实本质就是改变它的状态，说的有点多，希望不要嫌弃。

下面我们来看看什么是结构化伪类

好，看到上面图，我就问你怕不怕，是不是突然觉得好多，怕记不过来呢，其实呀，我们只要理清它们各自存在的意思，过一遍，然后时不时翻一翻，就记住啦。既然如此，让我们来思考，它存在的意义在哪里呢，其实呀，它的存在，还是非常有用，它是为了帮助我们选择很多个子标签的中第几个子标签，话不多说，代码如下

 <div class="li">
        <div class="lili"></div>
        <div class="lili"></div>
        <div class="lili"></div>
        <div class="lili"></div>
        <div class="lili"></div>
 </div>
 <div class="ayong"></div>

//css样式
    body {
      padding: 0;
      margin: 0;
    }
    .li {
      overflow: auto;//清除浮动的方法之一，上篇文章详解
      width: 100%;
    }
    .li .lili {
      width: 200px;
      height: 200px;
      float: left;
      border: 1px solid black;
    }
   
    .ayong {
      height: 500px;
      width: 500px;
      border: 1px solid black;
    }

好了，现在li标签有那么多个lili标签，如何选择他们呢，又很难做到雨露均沾，所以呀，结构化伪类腾空出世，极大方便我们的操作，你可能说加 id 或者其他 class 去选择它不就好啦，可以是可以，但是呢，又引入了其他标签，所以呀，让我们看看有哪些呢（如果这里有小伙伴觉得我没有清除浮动的可以去看我上一篇文章噢）

（一）:first-child
首先这个呢，first嘛，顾名思义，就是第一个，child是孩子的意思，那连起来，不就是第一个孩子的意思嘛，好，上代码

.lili:first-child {
  background-color: black;
}

这样一看，一目了然，再来第二个

（二） : last-child
last的意思是最后的意思，最后的孩子，我们来上代码

.lili:last-child {
  background-color: black;
}

如下图所示

接着，我们看看第三种

（三）:nth-child 对指定序号的子元素使用样式
:nth-last-child 对倒数指定序号的子元素使用样式

:nth-child(1)表示第一个子元素 那效果就等同于上面的:first-child
:nth-last-child(1)表示最后一个子元素，那效果就等同于上面的:last-first

里面的数字呢，就决定了第几个元素，就好理解啦

（四）:nth-of-type 和:nth-last-of-type

既然有了上面的对子元素指定，为什么要多这个type这个鬼东西呢，难道是有什么特殊的情况嘛

哈哈，正如你所看到的，确有其事，不过这里面有涉及了一个知识点，就是nth-child(数字)，里面的数字可以是一个变量，even表示偶数，odd表示奇数，当然可以是n+1,n+2,2n+1等等啥的，这个后面再提一下，因为它涉及到了一个循环的方法。好了，知识补充完毕了，该开始正题了。

上代码

<div class="test">
        <h4>我是第一个</h4>
        <p>我是第二个</p>
        <h4>我是第三个</h4>
        <p>我是第四个</p>
        <h4>我是第五个</h4>
        <p>我是第六个</p>
        <h4>我是第七个</h4>
        <p>我是第八个</p>
 </div>
 
//css样式
.test {
  width: 200px;
  margin: 0 auto;
}

上css代码

h4:nth-child(odd) {
  background-color: aqua;
}

效果如下图

如图所示，确实都是奇数的，但是我只想选择h4这个标签下的奇数，而不是整体的奇数，懂我意思嘛，就是说，上图说的"我是第三个"，在div这个整体的标签下看来，是第三个，但是在h4这个标签下，我才第二个，因此，我们试试nth-of-type
代码如下

h4:nth-of-type(odd) {
  background-color: aqua;
}

效果如下

所以讲到这里，大家或许都明白了，nth-of-type存在的意义，它就是为了在它那种类型里面指定自己想要，nth-child就没想那么多，它可能觉得小孩子才做选择，它都要哈哈

好了，讲到这里，想必大家对nth-child 、nth-of-type 已经有一定了了解了，last就是倒过来。所以下面介绍一下，它们里面的数字，涉及到的循环方法，又是什么呢？

nth-child(n+1)，nth-child(2n+1),等等，它对应着不同的标签，合理的运用，你也可以的，赶紧试一下吧。

（五）:only-child

这个呢，是表示子元素只有一个的时候才会执行，如果它的子元素超过一个，那肯定就不执行啦。

上代码如下

 <div class="test_only">
        <ul>
            <li>11</li>
        </ul>
        <ul>
            <li>22</li>
            <li>33</li>
        </ul>
 </div>



 //css代码
        li:only-child {
          background-color: black;
        }

好了，当你读到这里，想必已经对

nth-child    

nth-of-type  

only-child

有了一定的了解了，我们再来看 看其他的妖魔鬼怪，答应我，打败它，好吗

（六）:not
这个又是什么呢，顾名思义，就是not就是不要，比如在li标签中，你不要哪个标签参与，你只需要

:not(h4) h4就会排斥，太可怜了，如下

.test:not(h4) {
  background-color: black;
}

（七）:empty
这个又是啥呢，说实话我本来也不知道，看了资料，原来它更多的是用在表格table上，如果那个空格空着了，它就可以锁定啦，直接过去改它的颜色，美滋滋，先记着，说不定哪天用到了呢哈哈

（八）:root
看到这个，我感觉有点高大上的感觉，赶紧喝了一杯水压压惊，然后想了想，它的意思，是根的意思，那就是最底部，最基础的东西，所以，一般呢，root之后，只要后面，没有css元素去重叠它，它基本就那个属性啦，比如说

:root {
    color: aqua;
}

直接加这个代码，你的颜色都是这个了，除非后面有改动，我觉得，这个一般作为默认样式理解，有点像这个*选择器。

（九）:target
这个呢，用在超链接上比较多，并且还有条件，要该元素的id被当成超链接来使用

上代码就知道啦。如下

 <p><a href="#news1">跳转内容 1</a></p>
<p><a href="#news2">跳转内容 2</a></p>
<p>单击上面的链接</p>
<p id="news1"><b>内容1</b></p>
<p id="news2"><b>内容2</b></p>

在css中加上，如下

:target {
    background-color: black;
}

那等你点击的时候呢，就会变色啦

是点完之后才变色，也就是点完才生效，这个有点像js的一些功能了。

好了，总结完了，上面一些内容，完全可以用js实现，但是css的伪类有些有的功能，我们为何不直接拿来用呢哈哈，但是呢，在pc端是完全可以，移动端的还待考验噢

以上就是常用伪类的总结，下次总结伪元素的其他用法，敬请期待吧，创作不易，且行且珍惜，一起加油，我们可以的