这篇博客详细介绍了CSS伪类选择器，特别是结构(位置)伪类选择器，包括:nth-child和:nth-of-type的区别。内容涵盖了链接伪类、结构伪类的选择和使用，强调了:nth-child的计数方式和用法，以及如何通过-n配合n选择特定范围的元素。此外，还解释了:nth-of-type如何根据元素类型而非DOM顺序进行筛选。
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。
为了和我们刚才学的类选择器相区别， 类选择器是一个点 比如 .demo {} 而我们的伪类 用 2个点 就是 冒号 比如 :link{}
链接伪类选择器
-
:link /* 未访问的链接 */
-
:visited /* 已访问的链接 */
-
:hover /* 鼠标移动到链接上 */
-
:active /* 选定的链接 */
a { /* a是标签选择器 所有的链接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是链接伪类选择器 鼠标经过 */
color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}
结构(位置)伪类选择器（CSS3)
- :first-child :选取属于其父元素的首个子元素的指定选择器
- :last-child :选取属于其父元素的最后一个子元素的指定选择器
- :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型
- :nth-of-type(n)： 简单来说nth-of-type会忽略其它标签的顺序而安装标签自身种类的顺序进行筛选，也就是选择的参照点并不是DOM数，而是自身。
- :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。 n 可以是数字、关键词或公式
li:first-child { /* 选择第一个孩子 */
color: pink;
}
li:last-child { /* 最后一个孩子 */
color: purple;
}
li:nth-child(4) { /* 选择第4个孩子 n 代表 第几个的意思 */
color: skyblue;
}
nth-child介绍
nth-child(n) 选择器匹配属于其父元素的第 n 个子元素。
使用它的时候需要注意几点：
- 第n个子元素的计数是从1开始，不是从0开始的
- 选择表达式中的字母n代表≥0的整数
它有3种常见用法
- 直接指明n的值：span:nth-child(1)
- 用even/odd分别代表偶数 / 奇数：span:nth-child(even)
- 借助n自定义选择范围：
nth-child(2n)/nth-child(2n + 1)：偶数 / 奇数
nth-child(n + 3)：第3个开始到最后
进阶用法
上面的用法中的第三部分，一般都是使用n，而有时候也会用到-n，比如选取前2个元素就是：nth-child(-n + 2)。
为什么是这样呢？其实运算：-n + 2 ≥ 0，就可以推出n ≤ 2。 由此，结合两者自动取交集，我们就可以限制选择某一范围。
比如选择第6个到第9个，就是：:nth-child(-n+9):nth-child(n+6) 注意：不是nth-child(2 - n)，-n要写在一起！ 真正理解“子元素”的含义 还是nth-child选择器，那么下面这段代码的样式是什么呢？
<html>
<head>
<style>
span:nth-child(2n) {
color: red;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
</div>
<span>3</span>
</body>
</html>
答案是：1是黑色的，2和3都是红色的。
因为<span>2</span>是其父节点的第2个（偶数）子元素，<span>3</span>是其父节点的第2个子元素，第一个是<div></div>
所以辨别是否匹配的关键是：找到父元素，然后再计算在父元素中的位置。
nth-of-type与nth-child的区别
nth-of-child：
它的属性就是按照所有类型标签的所谓整体队列进行排序筛选，也就是说不论你是h1，span还是p标签，使用这个属性你要遵循在DOM树中的顺序来进行操作。
nth-of-type:
简单来说nth-of-type会忽略其它标签的顺序而安装标签自身种类的顺序进行筛选，也就是选择的参照点并不是DOM数，而是自身。就是按照类型来计算，碰到一个同类型就加1。
目标伪类选择器(CSS3)
:target目标伪类选择器 :选择器可用于选取当前活动的目标元素
:target {
color: red;
font-size: 30px;
}
扫一扫
236
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
