Видите точную специфику CSS в Chrome Dev Tools?

Question

Я знаю, что в Chrome Dev Tools для выбранного элемента HTML соответствующие селекторы CSS прослушиваются в порядке специфичности на вкладке Стили.

Но можно ли увидеть точное точное значение специфичности CSS длякаждое правило в выбранном элементе?

РЕДАКТИРОВАТЬ: один ответ говорит, что я вижу значение специфичности CSS в вычисляемой вкладке, но я не вижу его там.Смотрите скриншот ниже.Возможно, мне нужно уточнить, что когда я спрашиваю, чтобы увидеть значение специфичности CSS, я ищу число, например, 0010 для селектора класса или 0001 для селектора элемента.

Answer 1

Инструменты Chrome dev сортируют классы по их специфике сверху вниз.

Проверьте это:

Проверьте элемент (в данном случае svg) и введите атрибут css, который вы хотитесм. специфику для (в данном случае «высота»).

Самое высокое всегда сверху!

Answer 2

• Щелкните правой кнопкой мыши по элементу, для которого нужно увидеть стили;
• Выберите Проверить ;
• Консоль откроется.Справа вы увидите вкладку Стили (по умолчанию она будет открыта);
• Переключение на вкладку Computed (справа от Стили );

На этой вкладке вы увидите все стили CSS со значениями, примененными к элементу.

ОБНОВЛЕНИЕ

Похоже, я неправильно понял вопрос, извините.

Похоже, в Chrome Dev Tools такого нет.Ознакомьтесь с этой проблемой .

В нынешнем виде простое отображение числа не так полезно, как может показаться большинству пользователей.Мы заинтересованы в изучении других шаблонов для объяснения переопределенных значений.