CSS特殊层类定义覆盖父层伪类样式问题咨询

问题出在你一开始的@layer base, special;声明上——这条代码直接定义了层的优先级顺序：后列出的层（special）优先级高于先列出的层（base）。而CSS @layer的核心规则就是：高优先级层的所有样式规则，会完全覆盖低优先级层的规则，哪怕低优先级层里的选择器特异性更高。

你的代码里，base层的.item:hover虽然特异性（类+伪类，权重20）比special层的.item（类，权重10）高，但因为special层的优先级更高，所以.item的color: rebeccapurple会直接覆盖.item:hover的color: red，导致hover时颜色不变。

解决方法 #

方法1：调整层的优先级顺序 #

把base层放在special层之后声明，让base层的优先级更高：

@layer special, base; /* 现在base层优先级高于special */

@layer base {
  .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
    transition: all 0.3s ease;
  }

  .item:hover {
    color: red;
  }
}

@layer special {
  .item {
    color: rebeccapurple;
  }
}

这样base层的.item:hover就能正常覆盖special层的.item，hover时颜色会从rebeccapurple过渡到red。

方法2：把hover规则移到special层 #

既然special层优先级更高，把.item:hover放到special层里，同一个层内，后定义的规则会覆盖先定义的：

@layer base, special;

@layer base {
  .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
    transition: all 0.3s ease;
  }
}

@layer special {
  .item {
    color: rebeccapurple;
  }
  /* 同一个层内，后定义的hover规则会覆盖前面的.item */
  .item:hover {
    color: red;
  }
}

方法3：使用:where降低special层选择器的特异性（不推荐，除非必要） #

用:where()把special层的.item包裹起来，降低其特异性，让base层的.item:hover能通过特异性优势覆盖它：

@layer base, special;

@layer base {
  .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
    transition: all 0.3s ease;
  }

  .item:hover {
    color: red;
  }
}

@layer special {
  /* :where()会让选择器特异性变为0 */
  :where(.item) {
    color: rebeccapurple;
  }
}

这种方法不推荐，因为会破坏@layer原本的层叠逻辑，仅适合特殊场景。

内容的提问来源于stack exchange，提问作者MaximPro