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

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并使用auto

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

.parent {
   left: 0px;
}

然后我就能用这样的东西来定义我的孩子

.child {
   left: auto;
}

它有效地"重置"了财产.

Answer 4

从技术上讲，您正在寻找的是未设置的值与简写属性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 封装在一种命名空间中可能是一个好习惯：

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

.namespace .customClass{
  color: red;
}

由于选择器的特殊性，这只会影响您自己的类

使用“预处理器脚本语言”（例如具有嵌套功能的SASS）更容易实现此目的：

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