是否有像“all:”这样的简写 css 属性，但对于未指定的属性？

Question

假设我有两个不同的样式表，它们将值设置为 div 元素的唯一属性，其中 class="example"。

样式表 A：

    .example {
        background-color: #000;
        border-radius: 50%;
        color: #fff;
        width: 25px;
        height: 25px;
        line-height: 25px;
        display: inline-block;
        text-align: center;
    }

样式表 B：

    div{
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
        vertical-align: baseline;
        background: transparent;
    }

是否有类似于all: revert; 的速记属性和值，我可以将其添加到样式表 A 以将所有未声明的属性设置为浏览器默认值，并基本上覆盖/擦除样式表 B？在我看来，它类似于remaining: revert;。

如果没有这样的速记属性，我是否可以做一些其他技巧，而无需明确列出样式表 A 中未声明的所有属性并应用“还原”？如果我可以使用 > 和/或 * 选择器将这个技巧递归地应用于 div 中的元素，则可以加分。

提前致谢。

Answer 1

由于all 属性的级联分辨率的工作原理，没有一种万能的方法来做到这一点（所以奖金问题没有通用答案，它完全取决于项目）。 CSS 级联不会通过它们出现的样式表来划分规则和声明——所有作者来源的样式都按照它们出现的顺序合并到一个逻辑“样式表”中，并相应地执行级联解析。这意味着稍后的样式表中同样特定的样式将优先，而 较早 样式表中的 更多 特定样式将优先。

在这种情况下，因为.example 恰好比div 更具体，所以将all: reset 声明放在.example 规则的顶部 会给你想要的效果（假设在其他地方没有您想保留的其他样式声明，或者在其他地方没有您想删除的更具体的声明，因为即使您这样做，这些声明也会继续适用）：

.example {
    all: revert;
    background-color: #000;
    border-radius: 50%;
    /* ... */

.example 中出现在 all: revert 声明之后的所有内容都不会受到它的影响。

在下面的代码 sn-p 中，您可以将应用all: revert 的结果与没有声明的元素进行比较：

.example:where(:first-of-type) {
    all: revert;
}

.example {
    background-color: #000;
    border-radius: 50%;
    color: #fff;
    width: 25px;
    height: 25px;
    line-height: 25px;
    display: inline-block;
    text-align: center;
}

div{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    vertical-align: baseline;
    background: transparent;
}

<p>Inspect each element's styles to see the effects of <code>all: revert</code>
<div class="example">1</div>
<div class="example">2</div>

或者，查看以下 Firefox 的 Inspector 截图：

元素 1：

元素 2：