CSS 选择器系列 - 解密选择器、权重与伪类，提升 CSS 精准度

CSS 选择器的种类
CSS 选择器是用于匹配 HTML 元素的一种语法规则，它允许开发者对页面元素进行精准定位和样式控制。CSS 选择器种类繁多，每种选择器都有其独特的匹配规则。

通用选择器

通用选择器（*）是 CSS 中最简单的选择器，它可以匹配页面中的所有元素。通常用于设置全局样式，如字体、背景颜色等。

ID 选择器

ID 选择器（#id）用于匹配具有特定 ID 的 HTML 元素。ID 必须是唯一的，因此 ID 选择器可以精准定位页面中的唯一元素。

Class 选择器

Class 选择器（.class）用于匹配具有特定 class 属性的 HTML 元素。class 属性可以是任意值，因此 class 选择器可以匹配页面中所有具有相同 class 属性的元素。

元素选择器

元素选择器（element）用于匹配页面中的特定 HTML 元素。例如，p 选择器匹配所有 p 元素，div 选择器匹配所有 div 元素。

群组选择器

群组选择器（selector1, selector2, ...）用于匹配多个选择器匹配到的元素。例如，div, p 选择器匹配所有 div 元素和所有 p 元素。

后代选择器

后代选择器（ancestor selector descendant selector）用于匹配祖先选择器匹配到的元素的所有后代元素。例如，div p 选择器匹配所有 div 元素的所有 p 后代元素。

选择器权重

当多个选择器匹配到同一个元素时，CSS 会根据选择器的权重来确定哪个选择器生效。选择器的权重由以下因素决定：

内联样式

内联样式的权重最高，为 1000。

ID 选择器

ID 选择器的权重为 100。

Class 选择器和元素选择器

Class 选择器和元素选择器的权重为 10。

群组选择器

群组选择器的权重是其成员选择器的权重之和。

后代选择器

后代选择器的权重是其祖先选择器的权重乘以 10。
例如，div p 选择器的权重是 div 选择器的权重（10）乘以 10，即 100。

容易混淆的伪类

CSS 中有一些伪类很容易混淆，例如：

:hover 和 :active

:hover 伪类用于匹配鼠标悬停在某个元素上的状态，:active 伪类用于匹配鼠标点击某个元素时的状态。

:focus 和 :visited

:focus 伪类用于匹配获得焦点的元素，:visited 伪类用于匹配已被访问过的链接。

:checked 和 :selected

:checked 伪类用于匹配被选中的复选框或单选按钮，:selected 伪类用于匹配被选中的下拉列表选项。

总结

CSS 选择器是 CSS 的基础，掌握选择器的种类、权重和伪类知识，可以显著提升 CSS 代码的精准度和可维护性。通过熟练运用 CSS 选择器，前端开发者可以更加高效地定位和样式控制页面元素，打造更优雅高效的前端代码。