从元素中删除/重置继承的 css

Posted 2023-03-21

【中文标题】从元素中删除/重置继承的 css

【英文标题】：remove / reset inherited css from an element

【发布时间】：2011-11-15 22:20:31

【问题描述】：

我知道以前有人问过这个问题，但在将其标记为重复之前，我想告诉您，我的情况与我在互联网上找到的情况有些不同。

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

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

例如：

div
    background-color:red;

所以如果我没有为我的 div 设置任何背景颜色，即使我不想要它也会显示为红色。

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

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

谢谢

【问题讨论】：

给你的 div 一个类，然后提供一个相应的样式表，你的 div 的用户可以包含或连接到他们现有样式表的末尾。这样，您可以提供所需的所有默认格式，但对于您的用户来说，他们可以根据需要修改默认格式。我知道这并不比您将想要的样式内联更轻松，但它更灵活，因此对您的用户有更大的好处。我见过这样工作的 jQuery 插件。

【参考方案1】：

无法为特定元素“重置”样式，您必须覆盖所有您不想要/不需要的样式。如果您直接使用 CSS 或使用 JQuery 来应用样式（取决于对您来说更容易，但我不建议为此使用 JavaScript/JQuery，因为这完全没有必要）。

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

【讨论】：

我在考虑 iframe，但就像你说的那样，它会导致我遇到比这更重要的其他问题。

但是我认为组织你的风格总是一个更好的解决方案，但我知道有时你必须应用一个快速修复。所以我认为从我可怕的角度来看，这个问题更适合你的情况：***.com/questions/15901030/…

2019 年更新：无法为特定元素“重置”样式，是的，all: unset 可能对我有用。

【参考方案2】：

只设置相关/重要的 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>。此外，您可以在声明中的每个分号前添加 `!important。当此选项失败时，您的客户会故意破坏您的布局。

【参考方案3】：

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

我认为这不适用于颜色，但我遇到了一个问题，我有一个父属性，例如

.parent 
   left: 0px;

然后我就可以用类似的东西来定义我的孩子了

.child 
   left: auto;

它有效地“重置”了属性。

【讨论】：

更具体地说，将属性设置为其默认值（auto 并非对所有内容都可用，例如颜色）。它并没有取消设置继承的值，只是显式地将其恢复为默认值。

【参考方案4】：

从技术上讲，您正在寻找的是 unset 值与速记属性 all 的组合：

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

.customClass 
  /* specific attribute */
  color: unset; 


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

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

.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>

因为选择器的specificity 这只会影响你自己的类

在“预处理器脚本语言”（如 SASS）中，使用嵌套功能更容易做到这一点：

.namespace
  .customClass
    color: red
  

【讨论】：

谢谢@SanBen。我希望早在 2011 年就有这个选项，但很高兴知道

我很欣赏这个问题已经很老了，但这现在应该是被接受/赞成的答案。总之：使用“未设置”或“初始”关键字。

【参考方案5】：

试试这个：创建一个简单的div，除了红色div之外没有任何样式或内容。现在您可以对普通div 的所有样式使用循环，然后将其分配给您的内部div 以重置所有样式。

当然，如果有人将样式分配给所有 divs（即不使用类。CSS 将是 div ... ），这将不起作用。

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

【参考方案6】：

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

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

除了覆盖它们（或使用其他元素）之外，没有其他方法可以删除特定的标签 CSS。

【参考方案7】：

您可以使用以下选项。

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

【参考方案8】：

据我了解，您想使用一个继承自除您的类之外的任何类的 div。如上一个回复中所述，您无法完全重置 div 继承。然而，对我来说解决这个问题的方法是使用另一个元素——一个不常见的元素，当然也不会在当前的 html 页面中使用。一个很好的例子是使用而不是自定义它，让它看起来就像你的理想。

area  background-color : red; 

【参考方案9】：

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

也许可以通过遍历整个 DOM 以找到您（重新）定义的类并删除/强制 css 样式来使用 jquery 实现解决方案。