Порядок отображения правил CSS в Chrome Developer Tools

Question

Я изучал веб-страницу в Chrome Developer Tools и заметил, что правила CSS отображаются в алфавитном порядке. Я заметил это, когда попытался отследить наследование правил, применяемых к элементу, через всех его предков.

Есть ли способ изменить порядок отображения правил? Или, возможно, это возможно с помощью других инструментов?

Спасибо.

Answer 1

Правила CSS отображаются в каскадном порядке, а не в алфавитном порядке.В результате самые верхние свойства переопределяют нижеследующие.Если у вас есть вариант использования, показывающий обратное, подайте его, используя crbug.com (с упоминанием DevTools в сводке) или используя ссылку webkit.org/new-inspector-bug.

Answer 2

Вы можете отредактировать «инспектора» самостоятельно. Это просто Html / Js

Check out C:\Users\--your username --\AppData\Local\Google\Chrome\Application\-- latest version --\Resources\Inspector

поскольку вы используете инструменты, я предполагаю, что вы знаете, что делаете, чтобы редактировать их:)

Answer 3

Я предлагаю вам Firebug Lite .Он не поддерживает все функции известного Firebug для Firefox, но все еще отличный инструмент для Chrome.

Answer 4

Если вы не особо привязаны к Chrome, посмотрите Firebug , расширение Firefox.Он показывает наиболее конкретный селектор вверху списка стилей, а каскадные стили из родительских элементов перечислены ниже по близости к проверяемому элементу.