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

Question

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

样式表 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内容将不受其影响。

在下面的代码片段中，您可以将应用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 检查器的屏幕截图：

元素 1：

要素 2：