CSS中的伪类与伪元素——伪类伪类和伪元素可以说是CSS中经常用到但是很容易让新手摸不着头脑的东西了，你是否也是这样呢？

`CSS`中的伪类与伪元素——伪类

前言

伪类和伪元素可以说是CSS中经常用到但是很容易让新手摸不着头脑的东西了，对我来说也是这样，上课的时候老师经常会用到，伪类可能还比较好理解一点，但是伪元素就一直很难理解了，经常用的::after、::before却一直不理解是什么东西，很难通过词面去联想到功能。你是否也是这样呢？所以在学习这一部分的时候我想到了，顺便可以总结一下做一下记录，巩固我的知识结构，也分享给大家。

今天主要讲的是伪类的部分

伪类和伪元素的概念

1. 伪类`:Pseudo-classes`

伪类Pseudo-classes是一种选择器，其功能是用来充当一些描述状态的选择器。

mozilla是这样解释伪类的：

伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样， 帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。

伪类的语法： : + 伪类名称，例如下面这样

div:hover{  /* 伪类:hover */
  property: "value";
}

以下是所有的CSS伪类选择器

CSS伪类分类

常用的伪类选择器

结构伪类选择器

:first-child, :last-child

:first-child和:last-child选择器一般就是简单的选择第一个或者最后一个元素了

值得说明的是，选中的必须满足是伪类前的元素，并且是第一个或者最后一个元素，两个条件缺一不可
```
/* 首先 找到li的父盒子，在选中里面的第一个子元素（li）*/
li:first-child{
    background-color: pink;
}
/* 最后一个元素 */
li:last-child{
    background-color: orange;
}
```

:nth-child()

:nth-child(n)选择器比较重要，能选中很多排列上有规律的元素，例如某一列元素，间隔n个元素等

选中第n个元素，编号从1开始

/* 选中第4个元素 */
li:nth-child(4){
    background-color: pink;
}

选中所有子元素

li:nth-child(n){
    background-color: green;
}

选中偶数个元素

li:nth-child(2n){
    background-color: pink;
}
li:nth-child(even){
    background-color: pink;
}

选中奇数个元素

li:nth-child(2n-1){
    background-color: #daa520;
}
li:nth-child(odd){
    background-color: #daa520;
}

选中某一列元素

li:nth-child(7n){
    background-color: greenyellow;
}

选中前n个元素

/* 选中前5个 */
li:nth-child(-n+5){
    background-color: red;
}

**:nth-child**还可以跟 **:last-child**结合

选中倒数第2个 （从后向前选中）

/* 选中倒数第2个 */
li:nth-last-child(2){
    background-color: green;
}
/*选中倒数前5个*/
li:nth-last-child(-n+5){
    background-color: pink;
}

……

不止以上这些写法，:nth-child的写法还有很多种，靠大家平时去思考和积累啦

:target

:target选择器需要配合锚点进行使用，表示被激活的状态

锚点

一般是以id来对网页进行快速跳转的定位器

此处是指 <a></a> 标签的属性href='#id' ，达到快速跳转到目标元素的功能

<style>
    p:target{  /* 当p被锚点指向后生效 */
        color: red;
        font-style: italic;
    }
</style>
<body>
<a href="#p1">p1</a>  <!-- 跳转到p1 -->
<a href="#p2">p2</a>
<a href="#p3">p3</a>
<a href="#p4">p4</a>
<p id="p1">ppppppp1</p>
<p id="p2">ppppppp2</p>
<p id="p3">ppppppp3</p>
<p id="p4">ppppppp4</p>
</body>

:not()

:not(selector)选择器用来排除指定的标签，selector可以是任意合法的选择器

<style>
    div:not(#t6){   /* 选择除了#t6之外的所有div */
        color: #666000;
    }
</style>
<body>
<div id="t6">6</div>
<div>666</div>
</body>

表单伪类选择器

:empty

:empty选择器选择内部完全为空的元素，其中完全为空是指

标签内无任何元素，即使内部为空的元素
标签内无任何文本

<style>
    div{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
    }
    div:empty{  /* 选择内部为空的div */
        background-color: red;
    }
</style>
<body>
empty
<div></div> <!-- 完全为空 -->
<!-- ⬇️不完全为空 -->
<div><span></span></div>
<div>6</div>
<div><span>666</span></div>

</body>

常用的伪类选择器就讲到这里，明天我会带来伪元素的概念以及常用的伪元素，喜欢本文章的同学记得点个关注，然后follow我的专栏哦

CSS中的伪类与伪元素——伪类