Почему внутренняя таблица стилей, использующая селекторы классов, перезаписывается внешней таблицей стилей?

Question

У меня есть внешняя таблица стилей, в которой есть правила для меток, благодаря чему формы в нашем проекте выглядят лучше. Они таковы ...

label { display:block; font-weight:bold; margin:7px 0; }
/* For testing purposes, I also added the following.
label { color:gold; }

Существует внутренняя таблица стилей, которую я использую в iframe (хотя я тестировал на стандартной странице ColdFusion, и это приводит к той же проблеме), в которой есть следующие правила для меток с классом ошибки.

label.error { display:inline; 
              color:red; 
              float:none; 
              padding-left:.5em; 
              vertical-align:top; }

Эти метки в настоящее время скрыты с помощью дисплея: нет атрибута с помощью плагина проверки jQuery (находится по адресу http://bassistance.de/jquery-plugins/jquery-plugin-validation/). Когда поле формы не проверено должным образом, метки отображаются. Все вышеперечисленные правила работают правильно, когда отображается метка, за исключением свойства display.

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

Я не имею ни малейшего понятия, почему свойство display не будет установлено должным образом, но если кто-нибудь может мне помочь, это будет ФАНТАСТИЧЕСКИ!

Спасибо

Разочарованный разработчик

РЕДАКТИРОВАТЬ: Эта проблема была исправлена ​​моим боссом, который сказал мне, что мой CSS должен быть более детальным. Я взял селектор EXACT label из родительской таблицы стилей и добавил к нему селектор класса, затем изменил и добавил правила по мере необходимости. Если вы заинтересованы в получении дополнительной информации, обратитесь к документации по наследованию CSS.

Answer 1

Сначала я подумал, что плагин проверки jQuery устанавливает свойство display для элемента, переопределяя ваши правила CSS.

Если вы добавляете !important в конец правила отображения в вашем файле CSS, вы должны быть в состоянии обойти это.Это довольно неприятное решение, IMO, и вам, вероятно, стоит взглянуть на другой способ работы с jQuery.validate вместо против , но это зависит от вас:)

Answer 2

Я думаю, что это может быть связано с методом отображения jQuery (fade, show и т. Д.), Который применяет блок display: для повторного отображения элемента.поскольку у jQuery есть свой способ сделать вещи видимыми.то, что вам, возможно, придется сделать, это не использовать, например, .show(), а вместо этого использовать .css({display : 'inline'}); для повторного отображения элемента.

Чтобы убедиться, что то, что я говорю, является правдой или нет, проверьте примененный cssэлементу label после того, как он станет видимым по сценарию в вашем firebug.

Если вы настроите jsfiddle или отправите несколько ссылок или примеров кода, сообщество сможет лучше установить причину вашей проблемы