我们如何防止特定元素继承带有 * 符号的 CSS 规则？

【问题标题】：How can we prevent a specific element from inheriting CSS rules with * sign?我们如何防止特定元素继承带有 * 符号的 CSS 规则？
【发布时间】：2020-09-30 05:51:16
【问题描述】：

我已经定义了这个 CSS 规则：

*,
*::before,
*::after {
    box-sizing: border-box
}

如果我们只想排除具有此类.testim 的特定元素怎么办？

【问题讨论】：

您可以使用 :not(.testim) 作为 * 的修饰符
如何...请告诉我们..
这能回答你的问题吗？ Not CSS selectors

标签： css

【解决方案1】：

:not() 就像*。它选择除了括号中的元素之外的每个元素。 (https://developer.mozilla.org/en-US/docs/Web/CSS/:not)。

:not(.testim), *::before, *::after {
  box-sizing: border-box;
}

div {
  width: 200px;
  border: 20px solid black;
}

.testim {
  width: 200px;
  border: 20px solid black;
}

<div>I am div with width: 200px and border: 20px.</div>
<hr>
<div class="testim">I am of the class testim with width: 200px and border: 20px.</div>

【讨论】：

【解决方案2】：

非常简单；如果我改正了，那么；

.testim,
.testim::before,
.testim::after{
  box-sizing: unset;
}

如果属性自然继承自其父级，则 unset CSS 关键字会将属性重置为其继承值，否则重置为其初始值。

More info 为 CSS unset 值。

【讨论】：

请务必在重置代码后安装它，您可能想尝试!important。