Приветствия. Я потратил несколько дней, пытаясь найти инструмент, который будет отображать точный номер специфичности CSS для каждого правила CSS, рассчитанный браузером. Я уже рассмотрел многие онлайн-ресурсы, в том числе Инструменты, чтобы увидеть спецификацию CSS - ссылки там говорят о переопределенных классах и т.д., Но я хочу увидеть, используемый браузером при применении определенных правил CSS.
Почему мне нужно видеть точный расчет специфичности CSS?
Я не могу преодолеть определенную проблему, когда браузер использует правила CSS, основанные на близости этого элемента к элементу, но перед этим у меня есть другое правило, которое должно иметь более высокую специфику, чем правило, которое применяется браузером. У меня нет простого кода, который я могу использовать для демонстрации с помощью jsfiddle, а код, который я пытаюсь отлаживать, слишком сложный, чтобы включить его в скрипку.
Почти каждый поиск привел к тому, что люди указывали на какие-то "правила специфичности CSS" или "понимание CSS-специфики". Я понимаю, что CSS-специфика должна работать, широко использовать инструменты разработки Firebug и Chrome и хорошо знать ссылки, которые указывают на понимание правил специфики. Мой квест - попытаться заглянуть в то, что думает обозреватель браузера при применении одного правила CSS над другим!. И поскольку он уже рассчитал эту информацию, чтобы решить, какое правило переопределяет другие правила, каким-то образом она должна быть доступной для информации, но я не знаю, как?
Самый базовый пример проблемы, с которой я столкнулся:
.testClass1 .title, .testClass2 .testClass1 .title { corresponding CSS styles }
.testClass2 .title, .testClass1 .testClass2 .title { corresponding CSS styles }
Или это может быть закодировано что-то вроде этого.... (в окончательном результате ничего не меняется).
.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
И структура HTML выглядит примерно так:
<!-- delivers intended results -->
<div class="testClass1">
<div class="title">Some Title</div>
</div>
<!-- Does not deliver intended results.
- I expected Rule 1 or Rule 2 to take effect, but Rule 3 gets
applied because of its proximity to the actual HTML element.
i.e. rule 3 is defined later in CSS then rule 1 and 2. -->
<div class="testClass2">
<div class="testClass1">
<div class="title">Some Title</div>
</div>
</div>
Я думал, что лучший способ отладить эту проблему - это посмотреть, что такое расчет CSS-специфики браузера, вместо того чтобы я должен был принимать определенные правила и вручную вычислять его каждый раз. Кроме того, браузер уже рассчитал это, применяя его, поэтому я искал инструменты для просмотра в браузере расчета этих правил специфичности, но не может найти способ сделать это в Firebug или инспекторе Chrome.
Кто-нибудь знает об этом и может ли кто-нибудь указать мне на инструмент, который может существовать? Я очень ценю вашу помощь. Спасибо!
EDIT: Я попытался собрать скрипку, чтобы увидеть, могу ли я воспроизвести "что-то вроде того, с чем я борюсь", чтобы продемонстрировать. Думаю, мне повезло - см. http://jsfiddle.net/smallworld/abvHC/1/. Проблема в этой скрипке по-прежнему слишком проста, но является представителем моей задачи, когда классы назначаются динамически, поэтому я не могу предсказать точный порядок. Пример 3 в скрипке - это несколько типичный случай, почему мне нужно было видеть рассчитанную специфичность. В любом случае, я думаю, было бы замечательно иметь возможность сравнить ваш расчетный номер с расчетами браузера.
ДРУГОЕ ИЗМЕНЕНИЕ: В то время как у меня все еще нет ответа на мои поиски, чтобы заглянуть в оценку специфики браузера для данного элемента, я думаю, что Фауст и другие привели меня к возможному решению исходной проблемы, с которой я столкнулся. Пожалуйста, ознакомьтесь с комментариями ниже. Учитывая, что вопрос заключается в возможности просмотра оценки специфики браузера, я мог бы также оставить этот вопрос открытым - очень вероятно, что ответ будет заключаться в том, что в настоящее время нет доступных инструментов, чтобы это можно было сделать.