Question

我正在处理的网页已经有一些基本样式表，其中一个包含这个规则：

address:not(:last-child), 
fieldset:not(:last-child), 
li:not(:last-child), 
ol:not(:last-child), 
p:not(:last-child), 
table:not(:last-child), 
ul:not(:last-child) {margin-bottom: 12px}

这是在我的<p class="mainCopy">标签上应用了12px的margin-bottom，我对此并不感兴趣。我希望能够用.mainCopy {margin-bottom: 0}覆盖它，但显然基本规则更多特定于我的规则。这迫使我制定一个比我想要或更需要的规则，例如p.mainCopy。此外，我有时需要<li class="mainCopy">，这会迫使我添加第二条规则，以满足<li>的要求。

有什么方法可以简单地重置这个属性，或者还原有问题的CSS声明吗？

Answer 1

由于address:not(:last-child)和类似物具有 11 特异性点，您可以复制类名以使其更强。例如，以下声明完全有效，并且具有 20 特异性点：

.mainCopy.mainCopy {
     margin-bottom: 0;
}

您必须在html中添加一个mainCopy：

<ul class="mainCopy">

修改

注意特异性的“要点”，因为没有小数点。它们是特异性的数字位置。例如：

 address:not(:last-child) /* is 0-0-1-1 specificity (1 tagname, 1 pseudoclass) */
 .mainCopy.mainCopy /* is 0-0-2-0 specificity (2 classnames) */

Answer 2

存在以下属性：

all: unset;

我认为可以这样使用：

.mainCopy {
    all: unset;
    margin-bottom: 0
}

https://developer.mozilla.org/en/docs/Web/CSS/unset

编辑：实际上我相信由于你的具体问题的特殊性，这可能不起作用。

Answer 3

回答你的问题（而不是解决你的问题）......

我可以重置CSS属性而不是覆盖它吗？

重置为什么？

CSS中的C代表级联，你总是会有几层样式，它们之间有精确定义但并不总是立即明确的规则。除了网站作者在不同地方设置的样式（外部CSS文件，<style>块，style=""属性...），在基线中我们将找到内置浏览器样式并且到目前为止据我所知，浏览器供应商可以自由分配他们选择的任何默认样式 - 通常用户可以将自己的样式添加到汤中，无论是使用内置设置还是使用附加组件。甚至所谓的CSS resets实际上并没有重置任何东西。他们只是添加了另一层样式。

没有“在这里创建快照”的语法（这是我能想到的唯一解决方案，没有彻底的分析）所以答案基本上是没有。

Answer 4

您可以向要排除的所有选择器添加另一个：不规则.mainCopy具有边距

address:not(:last-child):not(.mainCopy), 
fieldset:not(:last-child):not(.mainCopy), 
li:not(:last-child):not(.mainCopy), 
ol:not(:last-child):not(.mainCopy), 
p:not(:last-child):not(.mainCopy), 
table:not(:last-child):not(.mainCopy), 
ul:not(:last-child):not(.mainCopy) {
  margin-bottom: 12px
}

Answer 5

使用前面带有*标记的universal selector body。

body *.[<'className'>] {}

或者只是在您的课程前面添加body标记。

body .[<'className'>] {}

两者实际上是相同的，使用您认为合适的和/或更容易发现维护的那个。

address:not(:last-child),
fieldset:not(:last-child),
li:not(:last-child),
ol:not(:last-child),
p:not(:last-child),
table:not(:last-child),
ul:not(:last-child) {
  margin-bottom: 12px;
  color: red;
}
body *.mainCopy {
  margin-bottom: 0;
  color: green;
}

<main>
  <p class="mainCopy">p</p>
  <p>p</p>
  <ul>
    <li class="mainCopy">
      li
    </li>
    <li>
      li
    </li>
  </ul>
  <code>body *.mainCopy {}</code>
</main>

如果你是偏执狂，你甚至可以使用：

html .[<'className'>] {}

address:not(:last-child),
fieldset:not(:last-child),
li:not(:last-child),
ol:not(:last-child),
p:not(:last-child),
table:not(:last-child),
ul:not(:last-child) {
  margin-bottom: 12px;
  color: red;
}
html .mainCopy {
  margin-bottom: 0;
  color: green;
}

<main>
  <p class="mainCopy">p</p>
  <p>p</p>
  <ul>
    <li class="mainCopy">
      li
    </li>
    <li>
      li
    </li>
  </ul>
  <code>html .mainCopy {}</code>
</main>

Answer 6

我倾向于将initial作为属性值。

address:not(:last-child), 
fieldset:not(:last-child), 
li:not(:last-child), 
ol:not(:last-child), 
p:not(:last-child), 
table:not(:last-child), 
ul:not(:last-child) {margin-bottom: initial}

我可以重置CSS属性而不是覆盖它吗？

6 个答案:

修改