Как просматривать рассчитанную специфичность CSS в браузере? ⇐ CSS

[Anonymous]

Приветствую: я потратил дни, пытаясь найти инструмент, который отображал бы точное число специфичности CSS для каждого правила CSS, рассчитанного браузером. Я уже рассмотрел многие онлайн -ресурсы, включая инструменты для вида специфики CSS - ссылки там говорят о переопределенных классах и т. Д., Но я хочу видеть точный номер специфичности, рассчитанные и используемые браузером при применении конкретных правил CSS. < /p>

Почему мне нужно увидеть точный расчет специфичности CSS? У меня нет простого кода, который я могу использовать, чтобы продемонстрировать использование JSFiddle, и код, который я пытаюсь отладить, слишком сложный, чтобы включить в скрипку. < /p>

Практически каждый поиск привел к тому, что люди, указывающие на какие -то ссылки «Спецификации CSS» или «Понимание специфичности CSS». Я понимаю, как специфичность CSS должна работать, широко используйте инструменты Firebug и Chrome Developer и хорошо осведомлены о ссылках, которые указывают на понимание правил специфичности. Мой поиск - попытаться заглянуть в то, что думает о двигателе браузера при применении одного правила CSS над другим! < /strong> и, поскольку он уже рассчитал эту информацию, чтобы решить, какое правило переопределяет другие правила, каким -то образом это должна быть доступная информация, но я не знаю, как?.testClass1 .title, .testClass2 .testClass1 .title { corresponding CSS styles }
.testClass2 .title, .testClass1 .testClass2 .title { corresponding CSS styles }
< /code>

или это может быть закодировано что -то подобное .... (не отличается в конечном итоге.) < /p>

.testClass1 .title { corresponding CSS styles } --- call it Rule 1
.testClass2 .testClass1 .title { corresponding CSS styles } --- call it Rule 2
.testClass2 .title { corresponding CSS styles } --- call it Rule 3
.testClass1 .testClass2 .title { corresponding CSS styles } --- call it Rule 4
< /code>

и структура HTML выглядит примерно так ... < /p>



Some Title





Some Title


< /code>

Я подумал, что лучший способ отладить эту проблему было бы посмотреть, что такое расчет специфичности CSS в браузере, вместо того, чтобы мне приходилось принимать определенные правила и каждый раз рассчитывать его вручную. Кроме того, браузер уже рассчитал это при его применении, поэтому я искал инструменты, чтобы заглянуть в расчет браузера этих правил специфичности, но не смог найти способ сделать это в инспекторе Firebug или Chrome. < /p>

Кто -нибудь еще знает об этом, и кто -нибудь может указать мне на инструмент, который может существовать? Я очень ценю вашу помощь. Спасибо! Я думаю, мне повезло - пожалуйста, смотрите http://jsfiddle.net/smallworld/abvhc/1/. Проблема в этой скрипке все еще слишком проста, но своего рода представитель моей задачи, когда классы назначаются динамически, поэтому у меня нет возможности предсказать точный порядок. Пример 3 в скрипке является чем -то вроде репрезентативного случая того, почему мне нужно было увидеть рассчитанную специфичность. В любом случае, я думаю, что было бы замечательно иметь возможность сравнить ваше рассчитанное число с расчетом браузера. Пожалуйста, смотрите комментарии ниже. Учитывая, что вопрос о том, чтобы иметь возможность просматривать оценку специфичности браузера, я мог бы также оставить этот вопрос открытым - очень вероятно, что в настоящее время не будет доступных инструментов, чтобы иметь возможность сделать это.

Подробнее здесь: https://stackoverflow.com/questions/162 ... pecificity