Question

我知道此问题之前已被问过，但在将其标记为重复之前，我想告诉您我的情况与我在互联网上发现的情况略有不同。

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

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

例如：

div{
    background-color:red;
}

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

我遇到的唯一解决方案是覆盖尽可能多的css属性，这样我的div就会按照我想要的方式显示。这个解决方案的问题在于，有太多的css属性要覆盖，我希望我的脚本尽可能轻松。

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

由于

Answer 1

无法为特定元素“重置”样式，您必须覆盖您不需要/不需要的所有样式。如果你直接使用css或使用jquery来应用样式取决于你更容易（但我不会为此推荐使用javascript/jquery，因为它是完全不必要的。）

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

Answer 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。当此选项失败时，您的客户故意试图弄乱您的布局。

Answer 3

您可以尝试覆盖CSS并使用自动

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

.parent {
   left: 0px;
}

然后我能够用

之类的东西来定义我的孩子

.child {
   left: auto;
}

它有效地＆＃34;重置＆＃34;财产。

Answer 4

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

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

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

Answer 5

从技术上讲，您正在寻找CSS中的unset值：

如果未设置CSS关键字从其父项继承，则将其重置为继承值；如果不是，则将其重置为初始值。换句话说，在第一种情况下，它的行为类似于Inherit关键字，在第二种情况下，其行为与初始关键字类似。可以将其应用于任何CSS属性，包括全部的CSS缩写。

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

.otherClass{
  /* unset all attributes */
  all: unset; 
  /* 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
  }
}

Answer 6

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

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

除了覆盖它们（或使用其他元素）之外，无法删除特定标记CSS。

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

Answer 8

根据我的理解，你想要使用一个div，它继承了没有类，但是你的。如前面的回复中所述，您无法完全重置div继承。但是，对我来说这个问题的另一个因素是使用另一个元素 - 一个不常用的元素，当然不会在当前的html页面中使用。一个很好的例子就是使用而不是然后自定义它看起来就像你理想的那样。

area { background-color : red; }

Answer 9

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

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

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

9 个答案: