javascript - 不要在我的 chrome 扩展中继承网页的 CSS

Question

好吧，我正在开发一个 chrome 扩展，它在右侧创建一个侧栏 (div)。我为这个侧边栏创建了自己的 CSS 样式文件。但是，在网站上创建此侧边栏时，它采用为该网页建立的样式和 CSS。因此，我决定为侧边栏中的每个元素声明一个 id 和一个类，以具体说明我想要应用我自己的 CSS 文件的内容。我做了一些事情，但我的大部分元素的样式都被原始网页的 CSS 覆盖了。我尝试了引导程序，但它修改了整个网站并使我的扩展程序崩溃。我还尝试使用以下方法重置一些元素：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: initial;
    vertical-align: baseline;
    background: none;
}

但仍然无法正常工作。有谁知道我怎样才能将我的样式表只应用到我的侧边栏并且侧边栏不能继承网站的样式表。

标签： javascriptcssgoogle-chrome-extension

Answer 1

您可以使用all与通配符配对*进行微重置：

#yourDiv * {
    all: initial !important;
}

支持真的很好，特别是因为你正在为 chrome 开发这个扩展。

!important可能需要也可能不需要。