覆盖多个css规则

Question

我正在创建一个聊天窗口小部件，我想要覆盖一堆CSS。例如，如果这是网站主题的CSS：

textarea {
    color: red;
    margin: 10px;
}

如果我将我的小部件设置为：

textarea {
    padding: 5px;
}

然后只有我的小部件的CSS才能运行。但是，默认情况下它会将两个CSS添加到textarea中 - 如何阻止添加网站的CSS？

Answer 1

正如Marc B所述，您可以将聊天放在iframe中，在这种情况下，您可以拥有自己完全独立的样式表。

如果必须使用内联，那么您可以使用all css属性取消设置其他地方设置的内容：

Widget CSS：

textarea {
    all: unset;
    padding: 5px;
}

此外，正如其他地方的评论所指出的，最好的方法是为文本区域创建不同的类，并在必要时使用它们，例如：

textarea.main {
    color: red;
    margin: 10px;
}

如果我将我的小部件设置为：

textarea.chat {
    padding: 5px;
}

然后使用

<textarea class="main">

或

<textarea class="chat">

取决于您的需求。

Answer 2

嗯，我想这很容易写！对你所有的css规则都很重要。只需替换“;” “！important”如果这对你来说很简单，或者如果你真的想改变那么你可以真的使用iframe