具有类定义的 CSS 层会覆盖父层中具有伪类的样式

Question

CSS 分层是一件有趣的事情，因为它允许规避 CSS 的级联。

但我不明白为什么继承层会与

.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 {
  .item {
    color: rebeccapurple;
  }
}

<div class="item">Hello world!</div>

我期待从

rebeccapurple

到

red

的转变，但没有得到它。

Answer 1

这不是图层的工作原理。在 CSS 中，当两个选择器选择相同的元素并应用相同的属性时，浏览器会根据 Cascading order 选择要应用的属性，您可以在其中看到层是在 Specificity 之前确定的。

因此，无论您如何通过伪类（例如

:hover

）或Id或较低层中的任何方式选择元素，它总是会被同一样式表中的后续层覆盖。