Сброс настроек CSS в браузере по умолчанию для одного элемента в google chrome

Question

Расширение моего браузера добавляет элемент div к веб-страницам, открытым браузером на лету. div содержит несколько дочерних элементов, таких как кнопки, пролеты, поля ввода и т. д.

Проблема в том, когда div добавлен на страницу, css страницы влияет на div и его содержимое.

Например, если страница имеет CSS, такие как:

span { 
text-shadow: 1px 1px 1px blue; 
} 

то пролеты в моем на лету добавленной ДИВ имеет синюю текстовую тень. Что я делаю, чтобы исправить это, чтобы установить любую возможную директиву, которая может повлиять на содержание моего Div с! Важно, как

mydiv span { 
    text-shadow: none !important; 
} 

и это мусор.

Есть ли разумный способ переопределить css для данного элемента, который вернет его обратно в браузер (google-chrome) по умолчанию?

Спасибо.

Answer 1

Есть ли разумный способ сбросить CSS для браузера по умолчанию только для одного элемента?

К сожалению, нет. Значение auto будет действовать как значение по умолчанию при некоторых условиях, но не всегда, и вам все равно придется указывать его для каждого возможного свойства. Это что-то о CSS, который действительно отстой.

Одна идея приходит на ум. Видя, как вы спрашиваете именно о Chrome, если вы контролируете все классы CSS и не против какого-то беспорядка, вы можете быть в состоянии работать с CSS3-х not так:

span:not(.default) { 
text-shadow: 1px 1px 1px blue; 
} 

Если вы используете not(.default) в каждом правило CSS, вы можете иметь элементы, которые имеют поведение по умолчанию, если вы дадите им default класса:

<div class="default"> 

у меня нет личного опыта с CSS 3, но это должно работать. Он не будет работать в старых браузерах, поэтому он пока не совместим с большинством.

Answer 2

Вы не можете «сбросить» правила CSS, вы должны переопределить их (text-shadow:none;)