33

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

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

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

例如：

div{
    background-color:red;
}

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

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

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

谢谢

4

9 回答 9

18

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

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

于 2011-09-13T07:33:29.093 回答
12

只设置相关/重要的 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。当此选项失败时，您的客户会故意破坏您的布局。

于 2011-09-13T08:20:14.977 回答
8

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

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

.parent {
   left: 0px;
}

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

.child {
   left: auto;
}

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

于 2013-11-20T20:24:42.530 回答
3

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

如果属性是从其父级继承的，则 unset CSS 关键字会将属性重置为其继承值，否则重置为其初始值。换句话说，它的行为类似于第一种情况下的 inherit 关键字，以及第二种情况下的初始关键字。它可以应用于任何 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
  }
}
于 2020-03-09T12:32:36.193 回答
1

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

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

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

于 2011-09-13T07:38:16.980 回答
0

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

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

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

于 2011-09-13T07:37:30.717 回答
0

您可以使用以下选项。

<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>
于 2014-06-28T10:51:41.690 回答
0

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

area { background-color : red; }
于 2015-11-08T19:51:10.413 回答
-1

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

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

于 2011-09-13T07:34:09.673 回答