Блог

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

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

Что-то вроде

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

и

 .ignore-css{all:unset;}
  

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

Вы можете переопределить другой стиль, используя «!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
  

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

Обновить:

Например:

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

 a {color: blue}
  

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

 a {color: red !important}
  

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

 body a {color: red !important}
  

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

#id1 .class1 выберите

или

.класс:ширина: 200 пикселей !важно

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

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

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

CSS:

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

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

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

Что я обычно делаю в этой ситуации, так это добавляю уникальный класс к новому элементу; в этом случае сработает что-то вроде этого:

 <select class=i-am-unique>
    <!-- <option> elements in here -->
</select>
  

а затем в таблице стилей найдите глобальное правило и добавьте :not() псевдокласс для различения:

 select:not(.i-am-unique) {
    /* global rules */
}

select.i-am-unique {
    /* unique rules */
}
  

Для этого требуется минимальное обновление кода: в вашу HTML-разметку добавлен только 1 класс, изменен один CSS-селектор и 1 новый блок объявления для уникального элемента. Вот пример.

Кроме того, :not() поддерживается широким спектром браузеров, даже IE9 и Safari 3.2 .