Подтвердить что ты не робот

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

Приветствия. Я потратил несколько дней, пытаясь найти инструмент, который будет отображать точный номер специфичности 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 в скрипке - это несколько типичный случай, почему мне нужно было видеть рассчитанную специфичность. В любом случае, я думаю, было бы замечательно иметь возможность сравнить ваш расчетный номер с расчетами браузера.

ДРУГОЕ ИЗМЕНЕНИЕ: В то время как у меня все еще нет ответа на мои поиски, чтобы заглянуть в оценку специфики браузера для данного элемента, я думаю, что Фауст и другие привели меня к возможному решению исходной проблемы, с которой я столкнулся. Пожалуйста, ознакомьтесь с комментариями ниже. Учитывая, что вопрос заключается в возможности просмотра оценки специфики браузера, я мог бы также оставить этот вопрос открытым - очень вероятно, что ответ будет заключаться в том, что в настоящее время нет доступных инструментов, чтобы это можно было сделать.

4b9b3361

Ответ 2

Если вы хотите посмотреть, что думает браузер, нажмите F12 в IE или перейдите в исходный код в другом браузере. Нажмите на тег HTML, который вы хотите увидеть в css, о котором он думает. Затем он справа отображает строки через игнорируемый код. надеюсь, что это помогло.

Ответ 3

Я использую Firebug addon в Firefox. Пока это работает для меня.