Увидеть точную специфику CSS в Chrome Dev Tools?
Я знаю, что в Chrome Dev Tools для выбранного элемента HTML соответствующие селекторы CSS прослушиваются в порядке специфичности на вкладке «Стили».
Но можно ли увидеть точное значение специфичности CSS для каждого правила для выбранного элемента?
Обновлено: один ответ гласит, что я вижу значение специфичности CSS на вкладке вычислений, но я не вижу его там. См. Снимок экрана ниже. Может быть, мне нужно уточнить, что, когда я прошу увидеть значение специфичности CSS, я ищу число вроде 0010 для селектора класса или 0001 для селектора элемента.
Что-то вроде этот макет было бы действительно полезно
Ответы 3
- Щелкните правой кнопкой мыши элемент, для которого нужно просмотреть стили;
- Выберите Осмотреть;
- Консоль откроется. Справа вы увидите вкладку Стили (по умолчанию она будет открыта);
- Перейти на вкладку Вычислено (справа от Стили);
На этой вкладке вы увидите все стили CSS со значениями, примененными к элементу.
ОБНОВИТЬ
Похоже, я неправильно понял вопрос, извините.
Похоже, в Chrome Dev Tools такого нет. Обратите внимание на этот проблема.
As it stands, simply displaying a number isn't as useful as it may seem to the majority of users. We are interested in exploring other patterns to explain overridden values.
Я не могу найти там то, что ищу. Смотрите мою правку.
@ user1283776 Попробуйте установить флажок Show all, он покажет все стили, даже на уровне браузера. Кроме того, есть поле Filter (в одной строке с Show all), оно интерактивно, и вы можете ввести искомое значение, например 0010 или 0001.
Это не показывает оценку специфичности. @htshame Я думаю, вы неправильно поняли вопрос.
@Turnip да, ты прав, моя плохая. Я обновил свой ответ, похоже, что в Chrome Dev Tools такого нет.
Инструменты разработчика Chrome сортируют классы по их специфике сверху вниз.
Проверь это:
Проверьте элемент (в данном случае svg) и введите атрибут css, для которого вы хотите узнать специфику (в данном случае «высота»).
Высшее всегда на высоте!
Значения специфичности не отображаются непосредственно в инструментах Chrome - или я что-то упустил?
Расширение chrome "CSS Dig" предлагает решение для нахождения значений специфичности в chrome в формате 0,0,0.
Расширение работает и выполняет свою работу, но имеет несколько ошибок.
Ссылка на сайт : https://chrome.google.com/webstore/detail/css-dig/lpnhmlhomomelfkcjnkcacofhmggjmco?utm_source=chrome-ntp-icon
Да в вычисляемой стороне