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

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

而且你必须mainCopy在你的html中只添加一个:

<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重置也不会重置任何东西.他们只是在其余部分上添加了另一层样式.

"在这里创建快照"没有语法(这是我能想到的唯一解决方案,没有彻底的分析)所以答案基本上没有.

Answer 4

您可以向要排除.mainCopy的所有选择器添加另一个:not rule以获得边距

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
}