CSS选择器详解：伪类选择器与结构伪类选择器-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_46405281/article/details/124827806

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

伪类选择器书写最大的特点是用冒号(:)表示，比如:hover 、:first-child。

链接伪类选择器

a:link		/* 选择所有未被访问的链接 */
a:visited	/* 选择所有已被访问的链接 */
a:hover		/* 选择鼠标指针位于其上的链接 */
a:active	/* 选择活动链接（鼠标按下未弹起的链接）*/

链接伪类选择器注意事项

为了确保生效，请按照LVHA的循顺序声明：:

:link, :visited, :hover , :active
记忆法: love hate或者lv包包hao 。
因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

链接伪类选择器实际工作开发中的写法∶

/* a是标签选择器所有的链接 */
a {
    display: inline-block;
    height: 41px;
	color: gray;
    text-decoration: none;
}
/* :hover是链接伪类选择器鼠标经过 */
a : hover {
	color: red;
    /* 鼠标经过的时候，由原来的灰色变成了红色 */
    background-color: pink;
}

:focus 伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

input:focus {
	background-color: yellow;
}

结构伪类选择器 (CSS3)

选择符	简介
E:first-child	匹配父元素中的第一个子元素 E
E:last-child	匹配父元素中最后一个子元素 E
E:nth-child(n)	匹配父元素中的第n个子元素 E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

E:nth-child (n)

nth-child (n) 选择某个父元素的一个或多个特定的子元素

n 可以是数字，关键字和公式
n 如果是数字，就是选择第n个子元素，里面数字从1开始

n 可以是关键字：even 偶数，odd 奇数

ul li:nth-child(even) {
	background-color: gray;
}
ul li:nth-child(odd) {
	background-color: pink;
}

n 可以是公式：常见的公式如下

公式取值
2n 偶数
2n+1 奇数
5n 5 10 15…
n+5 从第5个开始 (包含第五个) 到最后
-n+5 前5个 (包含第5个)
1. 这里面使用的字母必须是n。
2. n 从 0 开始，每次加1，往后面计算。
3. 忽略第0个元素或者超出的元素。
```
/* li:nth-child(n) 相当于选择所有li */
ol li:nth-child(n) {
    background-color: pink;
}
```

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15…
n+5	从第5个开始 (包含第五个) 到最后
-n+5	前5个 (包含第5个)

nth-child 和 nth-of-type 的区别

nth-child 对父元素里面所有孩子排序选择 (序号是固定的，从1开始) 。

先找到第n个孩子，然后看看是否和 E 匹配
nth-of-type 对父元素里面指定子元素进行排序选择。

先去匹配E，然后再根据E找第n个孩子

结构伪类选择器小结:

结构伪类选择器一般用于选择父级里面的第几个孩子
nth-child 对父元素里面所有孩子排序选择(序号是固定的)。先找到第 n 个孩子,然后看看是否和E匹配
nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E , 然后再根据E找第 n 个孩子
关于nth-child (n) 我们要知道，公式里面的 n 是从 0 开始计算的，要记住常用的公式
如果是无序列表，我们肯定用nth-child更多
类选择器、属性选择器、伪类选择器 (不带前面的E) 的权重为0010。

表单伪类选择器

:enabled 匹配可编辑的表单

:disable 匹配被禁用的表单

:checked 匹配被选中的表单

:focus 匹配获焦的表单

<style type="text/css">
	input:enabled{
		background: pink;
	}
    input:disabled{
        background: deeppink;
	}
    input:checked{
        width: 200px;
		height: 200px;
    }
    input:focus{
		background: pink;
    }
</style>