css伪类选择器有哪几种?

日期：2026-04-13 09:35:40 作者：创始人浏览：0

伪类（伪类选择器）

记住顺序：a:链接、a:访问、a:悬停、a:活动。

差异： a{}：所有超链接（包括锚点）。
a:link{}：仅具有 href 属性的超链接（不包括锚点）。

偏好： a:访问过{} > a:链接{}。

实用提醒：先写{}，再按顺序写伪类。

伪类选择器有哪些

等一下，昨天我帮朋友修复了一个网页。
他的购物车按钮是用 :hover 制作的。
当鼠标向上移动时，背景变暗，并且还有一些星星。
当您未单击时，星星是灰色的，而单击时，星星是黄色的。
使用的按钮是:visited，这个按钮蛮有趣的。
等等，还有别的事。
他用第n个孩子，用不同的底色将每三里分开。
他想了半天以为代码写错了，结果发现自己忘了写n，直接写了nth child。
实在是太惊人了。

css伪类:last-of-type选择器使用技巧

CSS中有一个东西叫做：last-of-type，这个东西挺有趣的。
只需选择父元素下方相同类型的最后一个子元素即可。
你看，它并不关心该元素是否是...父元素的最后一个子元素，它只查看...元素的类型和位置。
这在处理动态内容或不规则结构时非常有用。

让我们以 2 02 2 年在北京的一个网站上看到的例子为例。
他们使用 :last-of-type 给...最后一个

标签...红色字体。
在此页面上...

内有

第1 段

，然后是

第2 段

，最后是其他内容。
如果您使用 p:last-child... 您将无法选择任何元素，因为

不是... 最后一个子节点。
但是 p:last-of-type 可以选择...第二个

，无论其后面是否有。

另一个例子...这种导航菜单...或文章列表。
用边框或下划线分隔每个元素。
但对于最后一个元素...不需要分隔符。
例如，有一个 ... 主页关于联系方式。
为所有添加底部边框：li{border-bottom:1 pxsolid ccc;padding:8 px 0;}。
然后删除最后一个的底部边框：li:last-of-type{border-bottom:none;}。
这样最后一里就不会有边框了。

看...这个东西比 li:last-child 更安全...即使中混合了其他标签，比如评论容器，它仍然有效。

还可以与其他伪类结合使用...如：not()...提高选择精度。
例如...选择...块级元素的最后一段并删除其底部边距。
还有

第1 段

第2 段

其他内容

。
使用 div p:last-of-type{margin-bottom:0;} 选择...第二个

并删除其下边距。

或者在一组混合标签中...只需为最后一个标签添加右边距。
有

文字内容

。
使用项目 img:last-of-type{margin-right:0;} 选择...第二个并删除其右边距。

您还可以组合 :not() 来排除最后一段...并为其他段落添加下边距。
例如，

这样，除了最后一个

...其他所有内容都有 1 em 下边距。

需要注意的是...p:last-of-type只会匹配...最后一个

，不会影响其他类型元素。
如果父元素...具有多种类型...例如

和

，每种类型将独立计算...其自己的“最新”。

它只会搜索直接子元素...它在父元素之间不起作用。
空的或隐藏的元素...总是被计算在内...除非它们被从 DOM 中删除。
与 :last-child 的区别在于...:last-child 要求元素... 也是父容器的最后一个子节点。
并且 :last-of-type... 仅要求元素... 是其类型的最后一个... 并且不依赖于位置。

在实际应用场景中...比如动态内容处理...当列表或块的内容...由后端动态生成时...：last-of-type 确保样式始终正确应用...而不需要手动添加类名。
在 HTML 结构可能...与其他标签混合的情况...例如包含

...:last-of-type 更重要比：最后一个孩子可靠。

通过组合 :last-of-type 和 :not()...您可以减少对 HTML 类名的依赖...并提高代码的可维护性。
看左边...没有使用 :last-of-type 的列表...所有元素都有下边框...右侧使用后的效果...最后一个元素没有下边框。

掌握：类型最后的核心在于理解“同型”和“最后位置”之间的关系...合理使用可以大大提高...风格开发的适应性和效率。