如何限制CSS重置的范围？

我想在我的应用程序中使用CSS重置，但我的应用程序最终需要作为组件嵌入到其他应用程序中，因此我不想进行全局重置，因为这可能会影响我的父应用程序

例如，以下是（为简洁起见编辑的）的一部分：

我的第一个想法是使用Decentant选择器，将此重置约束到主组件节点的子节点。假设我的应用程序名为“foo”：

我遇到的问题是，这在我的应用程序中几乎每件事情上都赢得了特殊性之争

例如：

.huge-red-border {
    border: 10px solid red;
}

<div class="foo"> <!-- my component's root node -->
    <div class="huge-red-border">
        I should have a huge red border, but I don't
        because ".foo div" takes precedent over ".huge-red-border".
    </div>
</div>

。巨大的红色边框{
边框：10px纯红；
}
我应该有一个巨大的红色边框，但我没有
因为“.foo div”取代了“巨大的红色边框”。

我无法添加

！对我的每一条规则都很重要（因为我需要区分符在我的规则中有意义）

关于如何解决这个问题有什么想法吗？
这是一个特殊性和级联问题

您可以通过将首选元素进一步放在样式表中并增强其特殊性来克服它：


.foo div{/*特异性点：11*/
保证金：0；
填充：0；
边界：0；
字体大小：100%；
垂直对齐：基线；
}
巨大红色边界分区{/*特异性点：11*/
边框：10px纯红；
}

我应该有一个巨大的红色边框，但我没有，因为“.foodiv”取代了“.bounder”。
这就是重置从优雅状态下降并取而代之的主要原因。@Boldewyn normalize和reset有什么不同？您链接到的样式表只是一组全局规则，与任何其他重置一样。重置会删除尽可能多的浏览器默认值。规范化保留浏览器默认值并仅删除不一致性。但这两种技术都存在相同的级联问题。
.foo div, .foo span, foo h1, .foo h2, .foo h3, .foo h4, .foo h5, .foo h6, .foo p, .foo blockquote,
.foo pre, .foo a, .foo em, .foo img, .foo ins, .foo kbd, .foo q, .foo s, .foo b, .foo u, .foo i,
.foo ul, .foo li, .foo form, .foo label, .foo legend, .foo table, .foo caption  {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

.huge-red-border {
    border: 10px solid red;
}

<div class="foo"> <!-- my component's root node -->
    <div class="huge-red-border">
        I should have a huge red border, but I don't
        because ".foo div" takes precedent over ".huge-red-border".
    </div>
</div>