Javascript 从元素中删除/重置继承的 css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7398279/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
remove / reset inherited css from an element
提问by Doua Beri
I know this question was asked before, but before marking it as a duplicate, I want to tell you that my situation is a little different from what I found on the internet.
我知道之前有人问过这个问题，但在将其标记为重复之前，我想告诉您，我的情况与我在互联网上找到的情况略有不同。
I'm building and embedded script that people can put it on their sites. This script creates a div with a certain width/height and some information in it.
我正在构建和嵌入脚本，人们可以将其放在他们的网站上。此脚本创建一个具有特定宽度/高度和其中一些信息的 div。
My problem is that some websites declare styles for div that are inherited by my div as well.
我的问题是某些网站为 div 声明了样式，这些样式也由我的 div 继承。
for example:
例如：
div{
background-color:red;
}
so if I don't set any background color to my div, it will show red even if I don't want that.
所以如果我没有为我的 div 设置任何背景颜色，即使我不想要它也会显示红色。
The only solutions I come along is to overwrite as many css proprieties, this way my div will show exactly as I want. The problem with this solution is that there are too many css proprieties to overwrite and I want my script to be as light as it can be.
我遇到的唯一解决方案是覆盖尽可能多的 css 属性，这样我的 div 将完全按照我的意愿显示。此解决方案的问题在于，要覆盖的 css 属性太多，我希望我的脚本尽可能轻巧。
So my question is if you know another solution to my problem. It can be in css/javascript /jQuery.
所以我的问题是你是否知道我的问题的另一种解决方案。它可以在 css/javascript/jQuery 中。
Thanks
谢谢
采纳答案by oezi
"resetting" styles for a specific element isn't possible, you'll have to overwrite all styles you don't want/need. if you do this with css directly or using jquery to apply the styles depends on whats easier for you (but i won't recommens using javascript/jqueryfor this, as it's completely unneccessary).
无法为特定元素“重置”样式，您必须覆盖所有不需要/不需要的样式。如果您直接使用 css 执行此操作或使用 jquery 来应用样式取决于对您而言哪个更容易（但我不建议为此使用javascript/jquery，因为它完全没有必要）。
If your div is some kind of "widget" that can be included into other sites, you could try to wrap it into an iframe. this will "reset" the styles, because its content is another document, but maybe this affects how your widget works (or maybe breaks it completely) so this might not be possible in your case.
如果您的 div 是某种可以包含在其他网站中的“小部件”，您可以尝试将其包装到iframe 中。这将“重置”样式，因为它的内容是另一个文档，但这可能会影响您的小部件的工作方式（或者可能完全破坏它），因此在您的情况下这可能是不可能的。
回答by Rob W
Only set the relevant / important CSS properties.
只设置相关/重要的 CSS 属性。
Example (only change the attributes which may cause your div to look completely different):
示例（仅更改可能导致您的 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;
Choose a very specific selector, such as div#donttouchme, <div id="donttouchme"></div>. Additionally, you can add `!important before every semicolon in the declaration. Your customers are deliberately trying to mess up your lay-out when this option fails.
选择一个非常具体的选择器，例如div#donttouchme, <div id="donttouchme"></div>。此外，您可以在声明中的每个分号前添加 `!important。当此选项失败时，您的客户会故意弄乱您的布局。
回答by Seth
You could try overwriting the CSS and use auto
您可以尝试覆盖 CSS 并使用 auto
I don't think this will work with color specifically, but I ran into an issue where i had a parent property such as
我认为这不会特别适用于颜色，但我遇到了一个问题，我有一个父属性，例如
.parent {
left: 0px;
}
and then I was able to just define my child with something like
然后我就可以用类似的东西来定义我的孩子
.child {
left: auto;
}
and it effectively "reset" the property.
它有效地“重置”了属性。
回答by Aaron Digulla
Try this: Create a plain divwithout any style or content outside of the red div. Now you can use a loop over all styles of the plain divand assign then to your inner divto reset all styles.
试试这个：div在 red 之外创建一个没有任何样式或内容的平原div。现在，您可以对普通样式的所有样式使用循环，div然后将其分配给您的内部div样式以重置所有样式。
Of course this doesn't work if someone assigns styles to all divs (i.e. without using a class. CSS would be div { ... }).
当然，如果有人将样式分配给所有divs（即不使用类。CSS 将是div { ... }），则这不起作用。
The usual solution for problems like this is to give your diva distinct class. That way, web designers of the sites can adjust the styling of your divto fit into the rest of the design.
对于此类问题，通常的解决方案是为您提供div一个独特的类。这样，网站的网页设计师可以调整您的样式div以适应设计的其余部分。
回答by SanBen
Technically what you are looking for is the unsetvalue in CSS:
从技术上讲，您正在寻找的是CSS 中的未设置值：
The unset CSS keyword resets a property to its inherited value if it inherits from its parent, and to its initial value if not. In other words, it behaves like the inherit keyword in the first case, and like the initial keyword in the second case. It can be applied to any CSS property, including the CSS shorthand all.
如果属性是从其父级继承的，则 unset CSS 关键字会将属性重置为其继承值，否则重置为其初始值。换句话说，它的行为类似于第一种情况下的 inherit 关键字，第二种情况下的行为类似于 initial 关键字。它可以应用于任何 CSS 属性，包括所有的 CSS 简写。
.customClass {
/* specific attribute */
color: unset;
}
.otherClass{
/* unset all attributes */
all: unset;
/* then set own attributes */
color: red;
}
As an alternative:
If possible it is probably good practice to encapsulate the class or id in a kind of namespace:
作为替代方案：
如果可能，将类或 id 封装在一种命名空间中可能是一种很好的做法：
.namespace .customClass{
color: red;
}
<div class="namespace">
<div class="customClass"></div>
</div>
because of the specificityof the selector this will only influence your own classes
由于选择器的特殊性，这只会影响您自己的类
It is easier to accomplish this in "preprocessor scripting languages" like SASSwith nesting capabilities:
在具有嵌套功能的“预处理器脚本语言”（如SASS）中更容易实现这一点：
.namespace{
.customClass{
color: red
}
}
回答by AlexBay
As long as they are attributes like classes and ids you can remove them by javascript/jQuery class modifiers.
只要它们是类和 id 之类的属性，您就可以通过 javascript/jQuery 类修饰符删除它们。
document.getElementById("MyElement").className = "";
There is no way to remove specific tag CSS other than overriding them (or using another element).
除了覆盖它们（或使用另一个元素）之外，没有办法删除特定的标签 CSS。
回答by bharatpatel
you may use this below option.
您可以使用以下选项。
<style>
div:not(.no_common_style){
background-color:red;
}
</style>
now , if their any place where you do not want to apply default style you can use 'no_common_style' class as class. ex:
现在，如果您不想应用默认样式的任何地方，您可以使用“no_common_style”类作为类。前任：
<div class="no_common_style">
It will not display in red
</div>
回答by Dorceus Valjery Welinghton
From what I understand you want to use a div that inherits from no class but yours. As mentioned in the previous reply you cannot completely reset a div inheritance. However, what worked for me with that issue was to use another element - one that is not frequent and certainly not used in the current html page. A good example, is to use instead of then customize it to look just like your ideal would.
据我了解，您想使用一个继承自除您的类之外的任何类的 div。正如在之前的回复中提到的，您不能完全重置 div 继承。但是，对我来说，解决这个问题的是使用另一个元素 - 一个不常用的元素，当然也没有在当前的 html 页面中使用。一个很好的例子是使用而不是自定义它看起来就像你理想中的那样。
area { background-color : red; }
回答by ???
One simple approach would be to use the !importantmodifier in css, but this can be overridden in the same way from users.
一种简单的方法是!important在 css 中使用修饰符，但这可以通过用户以相同的方式覆盖。
Maybe a solution can be achieved with jquery by traversing the entire DOM to find your (re)defined classes and removing / forcing css styles.
也许可以通过遍历整个 DOM 以找到您的（重新）定义的类并删除/强制使用 css 样式来使用 jquery 来实现解决方案。
