Есть ли способ узнать, откуда приходит правило css?

Я унаследовал сайт .asp, и мне пришлось обновить страницы, чтобы переместить формы в таблицах на боковую панель.

Он работал отлично на всех, кроме одной страницы, которая упорно отказывается принять мою CSS и принимает значения от того, кто знает, где.

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

Есть ли способ узнать, откуда исходит правило css?

Ответы

Ответ 1

Вы можете использовать веб-инспектор в Chrome.

Щелкните правой кнопкой мыши на пропадающем элементе и выберите элемент проверки.

В окне веб-инспектора должно быть два раздела: left - это дерево узлов html, а справа - стили и свойства выбранного node. Неудачный элемент должен быть выбран уже.

Затем вам нужно развернуть вкладку "Вычисленный стиль" и искать стиль нарушения.

При обнаружении вы увидите небольшой треугольник слева от определения стиля - он доступен для клика. При щелчке он должен развернуть список селекторов, которые влияют на этот стиль для этого элемента. Вы увидите url для css для каждого из этого. Бинго.

Ответ 2

Как указано austin и Waterlink, вкладка Вычисленные стили (или Вычисленный в FF) может отображать текущие стили и их начало.

Однако вкладка Стили также очень полезна. Щелкнув правой кнопкой мыши "проверять" элемент, на вкладке "Стили" будет отображаться полный список всех активных стилей и перезаписанных стилей, связанных с проверяемым элементом. (Показывает их, как они были написаны в CSS. Не то, что на самом деле отображается) Таким образом, вы можете определить, какие стили были переписаны в каком порядке. Стиль в вашем css может быть перезаписан из встроенного стиля, определенного пользователем стиля, более позднего определенного файла css или правила css более высокого значения или даже атрибута non-css, такого как атрибуты width/height непосредственно на HTML-элемент

Форматирование показывает статус стиля:

  • обычный текст = активный
  • strike through = inactive, поскольку другой стиль перезаписывает его
  • greyed out = идентификатор не применяется. (Если вы проверяете стиль стиля <p>, а идентификатор css p, span, то идентификатор span будет выделен серым цветом)

Пример:

chrome debugger image

На этом изображении свойство color #post a неактивно. Оно было перезаписано свойством color в #cashieCatalog.

Ответ 3

На вкладке HTML Firebug вы увидите панель справа с вкладками Style, Computed, Layout и DOM. Выберите Computed. Это покажет вам "текущий" стиль, применяемый к странице.

Если вы разворачиваете правило node, вы должны увидеть ссылку справа, показывающую вам, какую таблицу стилей она исходит, а также переопределяемые правила стилей.