取消重置由外部样式表定义的样式

Un-reset Styles Defined by External Style-Sheet

本文关键字：定义 样式 外部样式表 取消      更新时间：2023-09-26

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

  • site.css:

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

  • reset.css：

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

不幸的是，我无法控制reset.css样式表的内容。现在假设页面的全部内容都封装在一个div块中，并应用了一个"reset"类。在这个div块的深处，我需要定义一个代码块，它将忽略这个类定义的样式。

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

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

您可以使用javascript动态地提供内联css。您首先需要将"对话框元素"放入一个变量中，比如myDialogElement。然后您需要使用以下代码：

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

一个选项是在site.css中覆盖reset.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也会起作用。以下是关于css 中特异性的MDN文档

相关文章：