CSS中的伪类与伪元素的选择器优先级比较详解 描述 ：在CSS中，当伪类（如 :hover 、 :nth-child() ）和伪元素（如 ::before 、 ::first-line ）同时出现在选择器中时，它们如何贡献给选择器的整体优先级？它们的优先级权重是如何计算的？这个问题是理解CSS层叠的关键点，尤其当样式冲突时。 解题过程循序渐进讲解 ： 步骤1：回顾CSS选择器优先级的基础规则 CSS选择器优先级通常用一个四元组（a, b, c, d）或具体数字（如0,1,0,0）表示，比较时从左到右逐位对比： a: 行内样式（style属性）的个数 b: ID选择器的个数 c: 类选择器、属性选择器、伪类的个数 d: 类型（元素）选择器、伪元素的个数 通用选择器（ * ）、组合器（ > 、 + 、 ~ 等）和否定伪类（ :not() ） 不增加 优先级权重（但 :not() 内部的选择器会单独计算）。 步骤2：明确伪类和伪元素在优先级中的归属位置 伪类 ：归属于 c 位（类选择器）。例如： :hover 、 :nth-child(2) 、 :focus 、 :checked 、 :not(.class) 等。 伪元素 ：归属于 d 位（类型选择器）。例如： ::before 、 ::after 、 ::first-line 、 ::first-letter 、 ::selection 等。 步骤4：对比伪类和伪元素的优先级权重 由于伪类属于c位，伪元素属于d位，在优先级比较时， c位优先于d位 。这意味着，一个单独出现的伪类（c=1）的优先级 高于 一个单独出现的伪元素（d=1）。 示例比较： 选择器 p:hover 的优先级为 (0,0,1,1) [ c=1(伪类:hover), d=1(元素p) ]。 选择器 p::first-line 的优先级为 (0,0,0,2) [ d=2(元素p + 伪元素::first-line) ]。 比较：先比c位， p:hover 的c=1， p::first-line 的c=0，所以 p:hover 优先级更高。 步骤5：复杂选择器的优先级计算示例 计算时，分别累加伪类和伪元素的个数到c和d位。 示例1： .item:nth-child(2n)::before 有1个类选择器（ .item ）和1个伪类（ :nth-child ）→ c = 2 有1个伪元素（ ::before ）→ d = 1 总优先级为 (0,0,2,1) 示例2： #sidebar a:hover::after 有1个ID选择器（ #sidebar ）→ b = 1 有1个伪类（ :hover ）→ c = 1 有1个元素选择器（ a ）和1个伪元素（ ::after ）→ d = 2 总优先级为 (0,1,1,2) 步骤6：特殊情况：否定伪类（:not()）的优先级计算 :not() 伪类本身不增加优先级权重，但其括号内的选择器会作为独立选择器计算优先级，然后整个 :not() 的优先级等于其内部选择器的优先级。 示例： :not(#id) 的优先级等于 #id 的优先级，即 (0,1,0,0)。 示例： div:not(.class)::before 内部选择器 .class 优先级为 (0,0,1,0) 因此 :not(.class) 贡献 c=1 元素 div 贡献 d=1 伪元素 ::before 贡献 d=1 总优先级为 (0,0,1,2) 步骤7：总结与记忆技巧 伪类（c位）的优先级高于伪元素（d位），因为c位在优先级比较顺序中先于d位。 在计算时，只需将伪类计入c位计数，伪元素计入d位计数，然后按四元组规则比较。 可以简单记忆为： ID > 类/伪类 > 元素/伪元素 ，其中伪类与类同级，伪元素与元素同级。