CSS Conflict

Question

Я пытаюсь сделать простой эффект фокуса для всех моих элементов INPUT, например:

INPUT:focus { border-color: orange; }

Это прекрасно работает, пока я не добавлю немного CSS в таблицу стилей:

.form_container .col2 INPUT
{
border: 2px solid #CCCCCC;
margin:0px 0px 0px 0px;
font-family:arial; 
font-size:14px;
padding:3px;
}

Теперь, когда я добавлю вышеупомянутое, эффект фокуса не будет работать ни с одним входом в классе form_container, когда я уберу вышеупомянутое, это работает.

Я могу заставить эффект работать, указав класс для ВХОДА так:

.form_container .col2 INPUT:focus { border-color: orange; }

Но я не понимаю, почему я должен это делать? Я хочу контролировать все эффекты INPUT, как в первом примере

если кто-нибудь может пролить свет на это ТНХ

Answer 1

Это потому что

.form_container .col2 INPUT

больше специфично чем

INPUT:focus

В CSS более конкретные правила имеют более высокий приоритет, независимо от того, в каком порядке они были объявлены. Правила, которые одинаково специфичны ( то же самое количество селекторов обычно y), правило, объявленное позже, переопределяет или добавляет правило, объявленное первым.

Вы можете указать ! Важный в стиле рамки для второго правила, но это поддерживается не во всех браузерах (я слышал IE?)

Answer 2

В вашем первом правиле вы объявляете цвет границы. В вашем втором правиле вы переопределяете это. Вы можете попробовать что-то вроде

INPUT:focus { border-color: orange!important; }