通过外部样式表

Question

定义取消重置样式说我有两个样式表我的网页上定义：

• 的site.css：

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

• reset.css：

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

不幸的是，我无法控制公司reset.css样式表的内容。现在说这个页面的全部内容都被封装在一个应用了“重置”类的div块中。在这个div块的深处，我需要定义一个代码块来忽略这个类定义的样式。

作为一个例子，如果我有一个模态对话框的“模态”应用类，我需要它有一个宽度为200px的绝对定位。我知道我可以重新定义所有样式，但这需要我维护相同样式的两个版本。

我一直在绞尽脑汁思考如何做到这一点，我能想到的唯一方法就是通过javascript（可选地使用jQuery）。如果有人知道如何做到这一点，或者可以分享一些示例代码来让我走，那将会很棒。

Answer 1

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

1. 使用!important

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

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

增加特异性

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

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

使用特异性如果可能的概率的最好方法，但使用!important也会起作用。这里是MDN docs on specificity in css

Answer 2

您可以使用javascript动态地给内联css。你首先需要获得“对话元素”到一个变量说myDialogElement。然后，你需要使用下面的代码：

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