css - 如何限制CSS重置的范围？

Question

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

例如，这是 Eric Meyer's reset 的一部分(为简洁而编辑):

div, span,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, em, img, ins, kbd,
q, s, b, u, i, ul, li, form, label, legend, table, caption {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

将这种重置限制为我的主组件节点的子节点的第一个想法是使用后代选择器。假设我的应用程序名为“foo”:

.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>

我无法将 !important 添加到我的每一条规则中(因为我需要该区分符在我的规则中具有意义)。

关于如何解决这个问题有什么想法吗？

Answer 1

这是一个特异性和级联问题。

您可以通过将您喜欢的元素进一步放在样式表中并提高其特异性来克服这个问题:

.foo div {     /* specificity points: 11 */
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}
div.huge-red-border {    /* specificity points: 11 */
  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>

这是另一种方法，允许您使用 :not() 伪类不断提高特异性:

.foo div {   /* specificity points: 11 */
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}
.huge-red-border:not(html):not(body) { /* specificity points: 12 */
  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>

来自规范:

6.6.7. The negation pseudo-class

The :not() pseudo allows useless selectors to be written.

For instance :not(*|*), which represents no element at all, or foo:not(bar), which is equivalent to foo but with a higher specificity.