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

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

div#copy table {
 width: auto;
}

В моей внутренней декларации есть:

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

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

2 ответа

Специфика для CSS и приоритета сложна для обработки иногда, в этом случае:

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

div # копия таблицы

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

table.MMPointBalance

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


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

В других подобных случаях у меня были встроенные объявления о том, что элементы управления Telerik переопределены некоторыми очень классными типами global.css.

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

licensed under cc by-sa 3.0 with attribution.