Инструменты разработчика Google Chrome показывают путь к CSS (или большую часть) выбранного элемента в нижней части панели инструментов. В Firebug вы можете щелкнуть правой кнопкой мыши по любому селектору в пути CSS и захватить путь к нему до этого элемента. У этой функции есть Google Chrome? Какие инструменты доступны, если нет встроенной поддержки?
Chrome обновил эту опцию
В хроме после последнего обновления этот параметр был изменен с (right click on the element in Elements Window) > Copy CSS path
to: (right click on the element in Elements Window) > Copy > Copy selector
Chrome не имеет этого, поэтому люди сделали хромированные расширения, букмарклеты и другие инструменты для Chrome, чтобы реплицировать эту функциональность.
Возможный дубликат: Chrome-эквивалент Firefox Firebug CSS выберите путь
Bookmarklet: http://www.selectorgadget.com/
Расширение Chrome: https://chrome.google.com/webstore/detail/lbghbpofdlcecfbpjgmffnkieenjkboi
Мне бы хотелось получить ответы на другие вопросы, предложения и советы о том, как лучше всего справиться с этим в Chrome.
Вы можете щелкнуть правой кнопкой мыши элемент в главном окне источника и "Скопировать CSS-путь". Это было спасателем жизни, когда мне приходится работать на страницах, которые я не могу перекодировать.
Вот небольшой (CoffeeScript) фрагмент, который даст CSS-путь (до первого элемента id, хотя вы можете легко изменить это, удалив часть прерывания):
getCSSPath = (node)->
parts = []
while node.parentElement
str = node.tagName
if node.id
str += "##{node.id}"
parts.unshift str
break
siblingsArr = Array.prototype.slice.call(node.parentElement.childNodes)
ind = siblingsArr.filter((n)-> n.attributes?).indexOf(node)
parts.unshift str + ":nth-child(#{ind + 1})"
node = node.parentElement
parts.join ' > '
Использует ": nth-child" для каждого node, поэтому вам нужно изменить его, если вы хотите получить также имена классов.
Самый эффективный способ использовать Chrome Inspector для редактирования вашего сайта CSS
Это рисунок монитора с усиливающимся стеклом. Моя жизнь как специалиста по веб-сайтам изменилась, когда я понял, что могу использовать Инспектор инструментов разработчика Chrome для игры с CSS на своих сайтах. Существует множество вариантов использования этих необычных инструментов, но здесь я сконцентрировался на явном использовании его для CSS.
Я сделал свою первую в истории скринкаст, чтобы без усилий продемонстрировать вам, как я последовательно использую оценщик, чтобы экспериментировать с изменениями конфигурации, прежде чем отправлять их своим заказчикам. Независимо от того, используете ли вы нестандартную тему, вы можете использовать эти средства и приклеить измененный CSS-код на вкладку "Пользовательский CSS" в Настройщике тем (если ваша тема предлагает это или вы используете Jetpack).
Чтобы попасть в DevTools, откройте страницу веб-сайта или веб-приложение в Google Chrome. Или:
Выберите меню Chrome Это меню Chrome Hamburger в правом верхнем углу окна вашей программы, затем выберите Инструменты> Инструменты разработчика.
Щелкните правой кнопкой мыши по любому компоненту страницы и выберите "Проверить элемент".
Вы можете использовать доску Элементов для ассортимента поручений:
Изучите HTML и CSS страницы сайта.
Тестируйте разнообразные форматы.
Live-изменить CSS.
Вы можете увидеть и изменить CSS для любого компонента на данной странице. В нем есть понимание того, как работают CSS (каскадные таблицы стилей) для работы с рецензентом, и понимание цепочки важности компонентов избавит вас от множества бездействующих попыток изменить стиль для компонента, который затем перезаписано более удаленным курсом.
Изменить и сделать стили
Вы можете включать или изменять стили внутри листа "Стили" на панели "Элементы". За исключением случаев, когда зона, содержащая данные стилей, становится серой (как в случае с шаблонами специалиста клиента), все стили можно редактировать. Изменяйте стили сопутствующими способами:
Измените текущее имя свойства или оценку.
Включить еще одно объявление о недвижимости.
Включить другое правило CSS.
Чтобы расширить возможности или вывести из строя утверждение стиля, установите или снимите флажок рядом с ним.
Измените текущее имя свойства или оценку
Привязка компонента на странице или компонента html для сравнения CSS:
Это снимок экрана Chrome Inspector
Привязать оценку свойства, чтобы изменить оценку. Если вы изменяете имя свойства, нажмите Tab или Enter, чтобы изменить оценку свойства.
Разумеется, ваши CSS-изменения не вечны, изменения будут потеряны при перезагрузке страницы. Моя любимая техника - копировать мои измененные стили в мой менеджер контента и после этого добавлять их специально к моей теме style.css. Chrome также предлагает рабочие пространства, которые механизируют часть этой процедуры. Я еще не пытался это сделать, так как я обычно делаю небольшие и явные изменения/изменения, которые трудно отразить в моем предмете.
Включить стандарт
Если у вас возникнут трудности с распознаванием селектора для компонента, вы можете попытаться использовать ловушку "Новое правило стиля" (+) в самой высокой точке на вкладке "Стиль". В случае, если вы нажали на компонент на сайте, который вам нужно изменить, и затем нажмите кнопку "+", в некоторых случаях он будет использовать фиксированные стили, поэтому вам не нужно его искать. Я обнаружил, что это вообще не работает. ,
Примечание. Когда вы создаете другой стандарт, использующий правило нового стиля, в новом руководстве не будет места с текущим шаблоном. DevTools добавляет его в необычный шаблон рецензента. Шаблон наблюдателя может быть изменен на панели источников как различные документы.
Это важный, начальный шаг для использования рецензента. Вы не должны иметь свой собственный сайт, чтобы сделать это! Вы можете играть с любым сайтом... это необычный метод для расширения вашего понимания и узнаваемости с помощью CSS. Здесь прецедент, изменяющий оттенок улова на странице поиска Google. www.keelog.com