从元素中移除/重置继承的CSS

remove / reset inherited css from an element

本文关键字：继承 CSS 元素      更新时间：2023-09-26

我知道以前有人问过这个问题，但在把它标记为重复之前，我想告诉你，我的情况和我在网上找到的有点不同。

我正在构建和嵌入脚本，人们可以把它放在他们的网站。这个脚本创建了一个具有一定宽度/高度和一些信息的div。

我的问题是，一些网站声明的div样式继承了我的div。

例如:

div{
    background-color:red;
}

如果我没有为div设置背景色，它就会显示红色即使我不想这样

我唯一的解决方案是覆盖尽可能多的css属性，这样我的div将完全显示我想要的。这个解决方案的问题是有太多的css属性要覆盖，我希望我的脚本尽可能轻。

所以我的问题是你是否知道我的问题的另一个解决方案。可以是css/javascript/jQuery。

谢谢

"Resetting"特定元素的样式是不可能的，你必须覆盖所有你不想要/不需要的样式。如果你直接使用CSS或使用JQuery来应用样式(取决于哪种对你来说更容易，但我不建议使用JavaScript/JQuery，因为这是完全不必要的)。

如果div是某种"widget"它可以包含在其他站点中，您可以尝试将其包装到iframe中。这将"重置"。样式，因为它的内容是另一个文档，但这可能会影响您的小部件的工作方式(或者可能完全破坏它)，所以这可能在您的情况下是不可能的。

只设置相关/重要的CSS属性

示例(仅更改可能导致div看起来完全不同的属性):

background: #FFF;
border: none;
color: #000;
display: block;
font: initial;
height: auto;
letter-spacing: normal;
line-height: normal;
margin: 0;
padding: 0;
text-transform: none;
visibility: visible;
width: auto;
word-spacing: normal;
z-index: auto;

选择一个非常具体的选择器，例如div#donttouchme, <div id="donttouchme"></div>。此外，你还可以加上"!"声明中每个分号之前都很重要。当这个选项失败时，你的客户会故意弄乱你的布局。

您可以尝试覆盖CSS并使用auto

我不认为这将与颜色具体工作，但我遇到了一个问题，我有一个父属性，如

.parent {
   left: 0px;
}

然后我可以用

这样的东西来定义我的child
.child {
   left: auto;
}

，它有效地"重置"属性。

从技术上讲，您要查找的是未设置的值与速记属性all:

unset CSS关键字将一个属性重置为它从父属性继承的值，否则重置为它的初始值。换句话说，它的行为在第一种情况下类似于inherit关键字，在第二种情况下类似于initial关键字。它可以应用于任何CSS属性，包括CSS简写all.

.customClass {
  /* specific attribute */
  color: unset; 
}
.otherClass{
  /* unset all attributes */
  all: unset; 
  /* then set own attributes */
  color: red;
}

你也可以使用初始值，这将默认为浏览器的初始值。

.otherClass{
  /* unset all attributes */
  all: initial; 
  /* then set own attributes */
  color: red;
}

作为替代:
如果可能的话，最好将类或id封装在某种命名空间中:

.namespace .customClass{
  color: red;
}

<div class="namespace">
  <div class="customClass"></div>
</div>

因为选择器的特殊性，这只会影响你自己的类

在"预处理器脚本语言"中更容易实现这一点。例如具有嵌套功能的SASS:

.namespace{
  .customClass{
    color: red
  }
}

试试这个:创建一个普通的div，没有任何风格或红色div之外的内容。现在你可以在普通div的所有样式上使用循环，并将其分配给内部div来重置所有样式。

当然，如果有人给所有div分配样式(即不使用类)，这就行不通了。CSS应该是div { ... }).

对于此类问题，通常的解决方案是为div提供一个不同的类。这样，网站的网页设计师就可以调整div的样式，以适应其余的设计。

只要是类和id之类的属性，就可以通过javascript/jQuery的类修饰符来删除它们。

document.getElementById("MyElement").className = "";

没有办法删除特定的标签CSS，除了覆盖它们(或使用另一个元素)。

您可以使用下面的选项。

<style>
  div:not(.no_common_style){
      background-color:red;
  }
</style>

现在，如果他们的任何地方你不想应用默认样式，你可以使用'no_common_style'类作为类。例:

<div class="no_common_style">
  It will not display in red
</div>

根据我的理解，您想使用继承自您的类的div。正如前面的回复所提到的，您不能完全重置div继承。然而，对我来说，解决这个问题的方法是使用另一个元素——一个不常用的元素，当然也不会在当前的html页面中使用。一个很好的例子，就是使用而不是定制它，让它看起来像你理想的样子。

area { background-color : red; }

一种简单的方法是在css中使用!important修饰符，但是用户可以用同样的方式覆盖它。

也许一个解决方案可以通过jquery实现遍历整个DOM来找到你(重新)定义的类和删除/强制css样式。

相关文章：