台州网站推广排名公诚管理咨询有限公司

CSS选择器有很多种，下面是常见的选择器类型，并按照其权重（即优先级）从高到低进行排序。

CSS选择器类型
通用选择器 (*)  （通配符选择器）

选择所有元素，权重最低。
例如：* { color: red; }
类型选择器 (元素选择器)

选择指定类型的元素。
例如：div { color: red; }
类选择器 (.)

选择具有特定类名的元素。
例如：.class-name { color: red; }
ID选择器 (#)

选择具有特定ID的元素，ID在整个文档中应该是唯一的。
例如：#id-name { color: red; }
属性选择器

根据元素的属性来选择元素。
例如：[type="text"] { color: red; }，选择所有type属性值为"text"的元素。
伪类选择器 (:)

选择元素的特定状态。
例如：:hover { color: red; }，选择当鼠标悬停在元素上时的状态。
伪元素选择器 (::)

用于选择元素的特定部分，如选中元素的首字母、首行等。
例如：::before { content: "★"; }，在元素内容之前插入符号。
后代选择器 (空格)

选择某元素内部的所有后代元素。
例如：div p { color: red; }，选择所有div元素内部的p元素。
子元素选择器 (>)

选择某元素的直接子元素。
例如：div > p { color: red; }，选择div的直接子元素p。
相邻兄弟选择器 (+)

选择紧接在指定元素后的第一个兄弟元素。
例如：h1 + p { color: red; }，选择紧接在h1后的第一个p元素。
通用兄弟选择器 (~)

选择指定元素之后的所有兄弟元素。
例如：h1 ~ p { color: red; }，选择所有在h1之后的p元素。
CSS选择器权重（优先级）
CSS选择器的权重计算方式是根据选择器的组成部分，权重越高的选择器优先级越高。权重是一个四元组的形式，通常表示为 (a, b, c, d)，其中：

a：内联样式的数量（直接在HTML元素的style属性中设置的样式），此值是最高优先级。比内联样式还高一级的是！important
b：ID选择器的数量（每个ID选择器的优先级为100）。
c：类选择器、伪类选择器、属性选择器的数量（每个此类选择器的优先级为10）。
d：元素选择器、伪元素选择器的数量（每个此类选择器的优先级为1）。
权重从高到低排序
内联样式

例如：<div style="color: red;">
权重：(1, 0, 0, 0)
ID选择器

例如：#id
权重：(0, 1, 0, 0)
类选择器、属性选择器、伪类选择器

例如：.class, [type="text"], :hover
权重：(0, 0, 1, 0)
元素选择器、伪元素选择器

例如：div, p, ::before, ::after
权重：(0, 0, 0, 1)
通用选择器 (*)

权重：(0, 0, 0, 0)（没有实际权重）
权重计算示例
选择器 #header .menu li a 的权重：

ID选择器：#header → 权重 0, 1, 0, 0
类选择器：.menu → 权重 0, 0, 1, 0
元素选择器：li 和 a → 权重 0, 0, 0, 1（两次）
总权重：(0, 1, 2, 2)

选择器 div > p:hover 的权重：

元素选择器：div, p → 权重 0, 0, 0, 1（两次）
伪类选择器：:hover → 权重 0, 0, 1, 0
总权重：(0, 0, 2, 2)

小结
CSS选择器的优先级排序由高到低是：内联样式 > ID选择器 > 类选择器、伪类选择器、属性选择器 > 元素选择器、伪元素选择器 > 通用选择器。通过这种方式，CSS可以决定多个样式规则同时作用于同一元素时，哪个规则会生效。