伪类到底是什么呢，与伪元素又有啥关联呢
小白程序员-博客第二篇
说到伪类和伪元素呢，这里可能就跟读者们唠叨一下啦，伪类和伪元素到底有什么渊源呢，上面文章说到伪元素可以清除浮动，其实呀，伪元素的功能不止于此，它还有好多其他的骚操作呢，我们先从区别开始讲起哈
到底啥是伪类呢
很多网站给了一句话，用于向某些选择器添加特殊的效果，太含蓄简洁啦，我压根就没懂
所以整理了一下，一般伪类，用的比较多的是结构化伪类和状态伪类，看到这两个千万别怕，其实不难，话不多说，一个个开刀，我们先看状态伪类，上图
是不是有种熟悉的感觉，这不就是我们平常的用的在元素上加个: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端是完全可以，移动端的还待考验噢
以上就是常用伪类的总结，下次总结伪元素的其他用法，敬请期待吧，创作不易，且行且珍惜，一起加油，我们可以的
转载：https://blog.csdn.net/weixin_44142985/article/details/101162188