Как я могу переопределить внешний CSS?

Question

Я использую инфраструктуру YUI Javascript, которая дает мне виджет календаря, который поставляется с файлом CSS. Они включены в начало моего файла Site.Master. Я хотел бы переопределить стиль, связанный с виджетом, но я не могу понять, как это сделать.

Я попытался добавить запись для класса виджета:

.yui-calendar
{
 height:10;
 width:10;
}

как в моем локальном css-файле, так и в теге style в мастер-файле. Когда я использую инструменты разработчика Internet Explorer для просмотра стиля страницы, в нем перечислены 3 источника стиля этого класса: мой локальный файл CSS, представление ASP.Net для страницы и внешний YUI CSS. Он никогда не ссылается на главный файл, и даже когда у меня есть класс в моем локальном CSS-файле, стиль не появляется в списке стилей инструментов разработчика (я не вижу .yui-calendar в списке, который он дает меня).

Итак, вопрос в том, как правильно переопределить стиль для класса, поступающего из внешнего файла CSS?

Answer 1

Видимый CSS определяется в следующем порядке:

1) Внешняя таблица стилей

2) Внутренняя таблица стилей (теги стилей)

3) Встроенный стиль

4) Пользовательская таблица стилей

5) Внешняя таблица стилей с! Важным

6) Внутренняя таблица стилей с! Важной

7) Встроенный стиль с! Важным

8) Определяемый пользователем стиль с! Важным

Самым низким в этом списке, который объявлен, будет тот, который используется.

Как примечание, это плохая форма, чтобы использовать!

Answer 2

Возможно, вы захотите попробовать добавить юниты к этому CSS:

.yui-calendar
{
 height:10px;
 width:10px;
}

Вам нужны единицы для значений, отличных от 0 в CSS.

Answer 3

Встроенный стиль переопределяет любое объявление стиля CSS.

Так что-то вроде этого:

<div class="yui-calendar" style="height:10px;width:10px;"></div>

В этом случае встроенный стиль переопределит любое внешнее определение.

Как отметил также Джейсон С., атрибут !important - это способ для вашего локального правила таблицы стилей переопределить любые внешние объявления. На самом деле, это, вероятно, лучший из 2, но они оба работают.

Answer 4

Я думаю, что вы хотите использовать !important (хотя не уверен). Смотрите эту страницу .

Answer 5

Попробуйте добавить !important в конце каждой строки определения вашего стиля:

.yui-calendar
{
  height: 10 !important;
  width: 10 !important;
}

Это объявит, что ваши определения стилей имеют более высокий приоритет, чем определения YUI. Документ W3c, объясняющий использование !important, это здесь .

Answer 6

Ответ Пола Уэйта, вероятно, должен разобраться.

Если вы не проверили, что YUI не создает встроенный стиль или какой-то другой элемент, на который вы еще не нацелены?