Определение того, какое правило CSS отвечает за формат любого элемента

Question

Я хочу щелкнуть / посмотреть элемент html и выяснить, какое правило CSS отвечает за какое свойство формата.

т.е. Я хочу знать, что шрифт исходит от body {}, цвет от h {} и отступ от #headercontainer

Есть ли способ сделать это?

Я пробовал firebug и cssedit (оба они очень крутые), но не вижу, где вы сможете найти наследство.

Кажется, что такая полезная вещь, которую хочется сделать, должен быть способ!

Спасибо.

Answer 1

Это прямо здесь, в firebug:

Встроенные инструменты теперь предлагают ту же функцию:

Answer 2

использовать firebug . Информация о стиле покажет, какие правила CSS применяются, а какие отменяются.

Когда вы проверяете элемент, вкладка стиля показывает, какие стили применяются. правила стиля с зачеркиванием являются переопределенными стилями (примечание: это с отключенным «показом вычисляемых стилей»)

Answer 3

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

Здесь - это видео на YouTube, демонстрирующее эту функцию.

Здесь - сайт Firebug. Вы можете увидеть на рисунке вверху данные наследования стилей справа.

Answer 4

Если вы можете терпеть IE, попробуйте Инструменты разработчика IE8 - они на самом деле довольно хороши. Откройте страницу в IE8 и нажмите F12, чтобы вызвать инструменты.

_{(источник: microsoft.com )}

Answer 5

Firebug предназначен для опытных пользователей, вы можете использовать рентген, если хотите нажать, чтобы узнать http://www.westciv.com/xray/

Для шрифтов есть дополнение к Firefox, которое называется font finder.
https://addons.mozilla.org/en-US/firefox/addon/4415

Answer 6

Кроме того, Google Chrome может предоставить вам эту информацию при запуске chrome: // inspector, который мне очень нравится. Также новая версия verison (2.x) проверяет ваш код, и ошибки отображаются после нажатия значка ошибки в правом нижнем углу

Answer 7

Да, для этого FireBug потрясающий. Firebug является надстройкой для Firefox и позволяет вам проверять каждый элемент на просматриваемой в данный момент странице, а также позволяет изменять их и сразу же видеть результаты.

Answer 8

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