CSS-селектор выбора / поиска?

Question

Кто-нибудь знает инструмент / плагин Firefox, который позволил бы мне щелкнуть объект DOM на странице и дать мне наследование CSS, необходимое для стилизации этого элемента?

Так что, если есть несколько вложенных элементов, ол ли ол ли и т. Д. ... как должен выглядеть мой CSS для стилизации указанного элемента?

Answer 1

Расширение Web Developer также отлично подходит для этого. Сочетание клавиш Ctrl+Shift+F для активации интерфейса щелчка ... щелкните любой элемент, чтобы увидеть полное дерево наследования.

Answer 2

Нет единого способа создать селектор. В конечном счете, создание полной цепочки предков для ваших селекторов порождает проблемы, потому что всякий раз, когда изменяется структура вашего документа, ваши селекторы ломаются. Мое эмпирическое правило заключается в использовании #id селекторов для одноэлементных элементов в вашем документе (т. Е. #MainNav или #content) и .class селекторов для элементов, которые повторяются, или для вставок (т. Е. .MenuItem, .external).

Answer 3

Взгляните на firequark .. Это расширение для firebug, которое извлекает селектор css для одного или нескольких узлов HTML

Answer 4

Firebug покажет вам полный путь к любому элементу (в верхней части вкладки HTML), но он не будет автоматически генерировать селектор CSS.

Answer 5

Вы хотите Firebug .

После установки вы можете щелкнуть правой кнопкой мыши по любому элементу на странице и выбрать «Проверить элемент» в контекстном меню. Это показывает все, что вам нужно знать об элементе, включая список всех стилей CSS, которые воздействуют на него. Для ваших целей вы, вероятно, захотите использовать первый селектор в списке.