外部样式表定义的未重置样式

Question

假设我在页面上定义了两个样式表：

• 的site.css：

  .modal {
      position: absolute;
      width: 200px;
      ...
  }
  
  ...
  

• reset.css：

  .reset * {
      position: static;
      width: auto;
      ...
  }
  

不幸的是，我无法控制reset.css样式表的内容。现在说，页面的全部内容都包含在div块中，并带有＆＃34; reset＆＃34;上课。在div块的深处，我需要定义一个代码块，它将忽略此类定义的样式。

作为一个例子，如果我有一个模态对话框，其中包含一个＆＃34;模态＆＃34;应用我需要它具有宽度为200px的绝对定位。我知道我可以再次重新定义所有样式，但这需要我保留两个相同样式的版本。

我一直绞尽脑汁想着如何做到这一点，我能想到的唯一方法就是通过javascript（可选择使用jQuery）。如果有人知道如何做到这一点，或者可以分享一些示例代码来让我继续前进，那就太棒了。

Answer 1

您可以使用javascript动态提供内联css。您首先需要获得“对话框”元素＆＃39;变成一个变量说myDialogElement。然后你需要使用以下代码：

myDialogElement.style.position='absolute';
myDialogElement.style.width='200px';

Answer 2

选项是覆盖reset.css中site.css中的样式。 您只需要包含要更改的样式，其余样式仍然会生效。有两种方法可以做到这一点：

1. 使用!important

.something{ color:red; } /* in reset.css */

.something{ color:blue !important; } /* in site.css */

1. 增加特异性

p{ color:red; } /* in reset.css */

div p{ color:blue; } /* in site.css */

如果可能，使用特异性是最好的方法，但使用!important也是有效的。以下是MDN docs on specificity in css