Не наследуйте CSS веб-страницы в моем расширении Chrome - PullRequest
0 голосов
/ 28 августа 2018

Ну, я работаю над расширением Chrome, которое создает боковую панель (div) справа. Я создал свой собственный файл стилей CSS для этой боковой панели. Однако, когда эта боковая панель создается на веб-сайте, она принимает стиль и CSS, установленные для такой веб-страницы. Поэтому я решил объявить идентификатор и класс для каждого элемента в боковой панели, чтобы указать, к каким вещам я хочу применить свой собственный файл 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;
}

Но все еще не работает. Кто-нибудь знает, как я могу применить свою таблицу стилей только к моей боковой панели, и боковая панель не должна наследовать таблицу стилей веб-сайта.

Ответы [ 2 ]

0 голосов
/ 28 августа 2018

Вы можете использовать all в паре с * подстановочным знаком для микро сброса:

#yourDiv * {
    all: initial !important;
}

Поддержка действительно хорошая , особенно если вы разрабатываете это расширение для Chrome.

!important может или не может быть необходимым.

0 голосов
/ 28 августа 2018

Когда вы делаете свой CSS, вы можете переопределить определенные значения с помощью ключевого слова! Important. Например:

h1 {color: red !important}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...