Почему внешние стили стилей переопределяют внутренние и встроенные стили?

Question

Я работаю на сайте с глобальной таблицей стилей, которая (плохо, ИМО) устанавливает стили для типов элементов. Я создаю некоторые пользовательские элементы управления ASP.NET для разных страниц, и я постоянно сталкиваюсь с проблемами, когда мои внутренние и встроенные стили переопределяются стилями в глобальной таблице стилей. Я использую Firefox. Например, я просто добавил элемент управления с таблицей в нем. Во время разработки у меня есть стиль, объявленный внутренне в пользовательском элементе управления (так что его нет в заголовке страницы). Внешний global.css таблица стилей заявил:

div#copy table { 
    width: auto; 
} 

Моя внутренняя декларация имеет:

table.MMPointBalance { 
    border: 0 none; 
    border-collapse: collapse; 
    display: inline-block; 
    width: 200px; 
} 

ширина: 200px настоящее время переопределены для автоматического внешней таблицы стилей. В других подобных случаях у меня были встроенные объявления о том, что элементы управления Telerik переопределены некоторыми очень классными типами global.css. (ложное заявление). Предполагается, что внутренние и внутренние линии должны иметь приоритет. Я бы подумал, что селектор встроенного стиля выше также будет более конкретным, чем глобальный. Почему он не применяется?

Answer 1

Specificity для CSS и Priority непросты для обработки иногда, в этом случае:

Этот селектор является гораздо более конкретными, поскольку он выбирает родительский конкретный DIV с id, а затем его стол ребенка.

DIV # скопировать таблицу

Это просто установив стол с классом:

table.MMPointBalance

Кроме того, если у вас есть !important декларации о глобальном. css, вы должны обращаться с тем же или более конкретным !important

Answer 2

Правило, использующее копию div #, имеет приоритет, поскольку использование идентификатора делает общее правило более конкретным. Вы можете либо изменить одно из правил, или использовать! Важный

В других подобных случаях, я был с инлайн деклараций о контрольных Telerik быть overidden некоторыми очень genearal стилей global.css.

Встраиваемые стили (с использованием атрибута style) будут переопределены только внешними стилями, если используется важное значение.