Есть ли способ сказать элемент HTML, чтобы игнорировать какие-либо таблицы стилей?

Question

Я пытаюсь добавить выпадающий список на страницу, которая уже имеет глобальный стиль «выбрать». Есть ли способ сказать новому списку выбора игнорировать глобальный стиль? Существует от 1 до 2 миллиардов существующих выпадающих списков, которые используют глобальный стиль, поэтому я не хочу реорганизовывать существующий html.

Answer 1

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

Что-то вроде

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

и

.ignore-css{all:unset;}

Answer 2

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

Answer 3

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

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

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

---

ОБНОВЛЕНИЕ:

Например:

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

a {color: blue}

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

a {color: red !important}

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

body a {color: red !important}

Answer 4

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

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

CSS:

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

Answer 5

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

#id1 .class1 select

или

.class:width:200px !important

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

Answer 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;
}