Есть ли способ сообщить элементу html игнорировать любые таблицы стилей?

Ответ 1

нет простого способа сделать то, что вы просите, один из подходов заключается в создании класса CSS, который сбрасывает все соответствующие атрибуты для определенного элемента и его дочерних элементов, чтобы сделать его более полным, вот хорошая отправная точка Специфичный элемент CSS reset

Ответ 2

Предполагая, что вы можете установить уникальный класс или идентификатор этого элемента, вы можете использовать (ограниченную поддержку браузера) свойство all и установить его до unset или initial

Что-то вроде

<div class="ignore-css"><div>

и

.ignore-css{all:unset;}

Ответ 3

Вы можете переопределить другой стиль, используя "! important", например:

a {color: red !important}

Или используя более конкретный селектор:

*               // a=0 b=0 c=0 -> specificity =   0 
LI              // a=0 b=0 c=1 -> specificity =   1 
UL LI           // a=0 b=0 c=2 -> specificity =   2 
UL OL+LI        // a=0 b=0 c=3 -> specificity =   3 
H1 + *[REL=up]  // a=0 b=1 c=1 -> specificity =  11 
UL OL LI.red    // a=0 b=1 c=3 -> specificity =  13 
LI.red.level    // a=0 b=2 c=1 -> specificity =  21 
#x34y           // a=1 b=0 c=0 -> specificity = 100 
#s12:not(FOO)   // a=1 b=0 c=1 -> specificity = 101

Смотрите документацию по специфике здесь.

UPDATE:

Например:

У вас есть глобальное правило:

a {color: blue}

Но вы хотите, чтобы ваши ссылки были красными. Итак, вы должны создать правило ниже:

a {color: red !important}

Если глобальное правило также имеет значение "! важно", вы должны использовать более конкретный селектор: Итак, вы можете использовать:

body a {color: red !important}

Ответ 4

вы можете добавить каскадные стили, например:

#id1 .class1 select

или

.class:width:200px !important

Важно, чтобы он использовал стиль, который вам нужен, а не глобальный, но если вам нужно его перезаписать, он может немного запутаться. Вы должны использовать комбинацию обоих.

Ответ 5

Я бы очень хотел сузить селекторов. Под этим я подразумеваю...

<div class="newbox">
     <a href="#">I want this to be different.</a>
</div>

CSS

div.newbox a
{
     color: #888;
     text-decoration: none;
}

Ответ 6

Или вы могли бы просто...

<div class="global-css">
<div class="ignore-css">
<div class="important-css">
......
</div>
</div>
</div>

где

.global-css{
    vertical-align: middle;
}
.ignore-css
{
    all:unset;
}
.important-css{
    vertical-align:left !important;
}