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;
}

我的第一个想法是将此重置约束到我的主要组件节点的子节点是使用后代选择器。让我们说我的应用程序被称为＆＃34; foo＆＃34;：

.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

:not()伪允许写入无用的选择器。

例如:not(*|*)，它根本不代表任何元素，或者   foo:not(bar)，相当于foo但更高   特异性。

如何限制CSS重置的范围？

1 个答案: