Невозможно переопределить CSS элемента

Question

У меня есть сайт с глобальным шаблоном, который содержит частичные шаблоны, но теперь я застрял с простой проблемой CSS:

HTML

<div id="context"> <!-- this is part of global template --> 
    <!-- this is rendered by partial template --> 
    <select id="test"> 
     <option>[Select a value]</option> 
    </select> 
</div> 

Глобальный CSS

В глобальной таблице стилей ширины по умолчанию для всех элементов внутри <select>#context определяется:

div#context select 
{ 
    width: 500px; 
} 

Частичное CSS

Теперь для частичного шаблона (который оказывает содержание внутри #context), мне нужно переопределить ширину по умолчанию <select>. Я думал, что это будет так же просто, как:

select#test 
{ 
    width: 150px; 
} 

Но я ошибся, это не работает. И я думаю, это потому, что CSS думает div#context select лучше подходит для элемента, так как он работает при изменении парциального шаблона CSS так:

div#context select#test 
{ 
    width: 150px; 
} 

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

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

См jsFiddle

Answer 1

Это достаточно, чтобы сделать ваш селектор просто немного сильнее:

body select#test 
{ 
    width: 150px; 
} 

Пример: http://jsfiddle.net/XvZSz/2/

От W3 - CSS Selectors:

Специфичность селектора вычисляется следующим образом:

• co UNT количество ID селекторов в селекторе (= а)
• подсчитать число классов селекторов, атрибуты селекторов и псевдо-классов в селекторе (= б)
• подсчитать количество селекторов типа и псевдо-элементов в селекторе (= с) ​​

[...]

конкатенации три числа а | б | с (в системе счисления с большим основанием) дает специфичностью.

Итак, div#context select 1 ID и 2 элемента: 0 | 1 | 2
Но: select#test 1 ID и 1 элемент (0 | 1 | 1) - не так сильна.

Подробнее:

• MDN - Specificity
• Specificity Calculator

Answer 2

Попробуйте это:

select#test 
{ 
    width: 150px !important; 
} 

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

Answer 3

важно перекроет любой стиль!.

select#test 
{ 
    width: 150px !important; 
} 

Answer 4

!important заменит ваш CSS

select#test 
{ 
    width: 150px !important; 
} 

demo

что, если ваш глобальный CSS имеет !important

Тогда вы могли бы назвать body select#test{/*call your css*/}

Answer 5

Это не о «лучше Матч»правило имеет более высокое значение специфичности пожалуйста, проверьте этот link

Я бы рекомендовал, чтобы избежать использования важно! Вы можете прочитать об этом here. Вот несколько подчеркивает, почему не для использования Важно:

1.Encourages корявые, плохо продуманными код

2.Creates код, который менее ремонтопригодны

3.Переопределяет стили, объявленные в пользовательских таблицах стилей, таким образом ухудшая доступность