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

Question

Благодаря [этому вопросу] [1] о перемещении элемента управления CalloutExtender инструментария AJAX за ответ на мою проблему позиционирования CallOuts Validator на веб-форме.

Может кто-нибудь сказать мне, почему добавление классов CSS непосредственно на мою веб-страницу в элементе <style> дает желаемый эффект, но при добавлении тех же классов к связанному файлу CSS они не имеют никакого эффекта?

Итак, добавив:

<style>

.CustomValidator {position:relative;margin-left:-80px;}

.CustomValidator div {border:solid 1px Black;background-color:LemonChiffon; position:relative;}

.CustomValidator td {border:solid 1px Black;background-color:LemonChiffon;}

.CustomValidator .ajax__validatorcallout_popup_table {display:none;border:none;background-color:transparent;padding:0px;}

.CustomValidator .ajax__validatorcallout_popup_table_row {vertical-align:top;height:100%;background-color:transparent;padding:0px;}

.CustomValidator .ajax__validatorcallout_callout_cell {width:20px;height:100%;text-        align:right;vertical-align:top;border:none;background-color:transparent;padding:0px;}

.CustomValidator .ajax__validatorcallout_callout_table {height:100%;border:none;background-color:transparent;padding:0px;}

.CustomValidator .ajax__validatorcallout_callout_table_row {background-color:transparent;padding:0px;}

.CustomValidator .ajax__validatorcallout_callout_arrow_cell {padding:8px 0px 0px 0px;text-align:right;vertical-align:top;font-size:1px;border:none;background-color:transparent;}

.CustomValidator .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv {font-size:1px;position:relative;left:1px;border-bottom:none;border-right:none;border-left:none;width:15px;background-color:transparent;padding:0px;}

.CustomValidator .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv div {height:1px;overflow:hidden;border-top:none;border-bottom:none;border-right:none;padding:0px;margin-left:auto;}

.CustomValidator .ajax__validatorcallout_error_message_cell {font-family:Verdana;font-size:10px;padding:5px;border-right:none;border-left:none;width:100%;}

.CustomValidator .ajax__validatorcallout_icon_cell {width:20px;padding:5px;border-right:none;}

.CustomValidator .ajax__validatorcallout_close_button_cell {vertical-align:top;padding:0px;text-align:right;border-left:none;}

.CustomValidator .ajax__validatorcallout_close_button_cell .ajax__validatorcallout_innerdiv {border:none;text-align:center;width:10px;padding:2px;cursor:pointer;}

</style>

работает прямо на моей странице, но если я вставляю классы в свой файл CSS (без естественного тега стиля), они, похоже, игнорируются, а другие изменения таблицы стилей (для других элементов страницы) отражаются.

Я дошел до того, что удалил все остальные стили из файла CSS, но все равно не радуюсь. Изменения «на полях слева» вверху. Стиль CustomValidator не действует, в то время как другие изменения, такие как цвет фона в div .CustomValidator, работают правильно.

Поле находится внутри таблицы и добавляет margin-left = -80 t стиля таблицы .CustomValidator, в файле CSS перемещает вызов влево, но не очень далеко, и движение одинаково, неважно что вы делаете значение.

Answer 1

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

<link rel="stylesheet" type="text/css" href="css/main.css" />

Я однажды сделал опечатку и сделал:

<link rel="stylesheet" type="text/css" href="css\main.css" />

и в некоторых браузерах он будет работать нормально, а в других - нет.

Answer 2

относится к Александру выше ...

Я бы попытался включить таблицу стилей в качестве первой и последней таблицы стилей в список листов (если их несколько). Точно так же некоторая библиотека или javascript могут перезаписывать изменения своим собственным CSS. Если другие каскадные правила не применяют самые последние правила, введенные ниже на странице будут переопределять старые / ранее введенные правила, если они описывают одни и те же элементы.

Используете ли вы вкладку CSS Firebug? Убедитесь, что загружаемый файл также может захотеть взглянуть на вкладку net, чтобы увидеть, когда он загружается по отношению к другим javascript или css, сравните это с тем, когда загружается файл, содержащий загружаемые файлы.

Answer 3

На самом деле, CSS следует каскадной (духовной) модели наследования сверху вниз в DOM, что делает их вход в DOM значимым. В зависимости от того, где в вашем CSS-файле вы их разместили, могут быть следующие правила, которые делают их недействительными. Размещение их в вашем коде напрямую (я полагаю, рядом с местом использования) обеспечит синтаксический анализ CSS как последнего и наиболее значимого. Я предполагаю, что некоторые детали о размере вашего CSS (внешнего) файла и сложности внутри будут информацией в этом случае. Я бы также пропустил этот CSS-файл через валидатор, просто чтобы убедиться, что у вас там нет ошибок (например, * правила, с которыми нужно обращаться осторожно).

Answer 4

Я собираюсь получить, возможно, слишком очевидный ответ ... вы уверены, что включаете файл CSS?

Answer 5

Возможно, ваш браузер кэшировал вашу таблицу стилей и поэтому не показывает какие-либо недавние изменения, которые вы внесли в нее.