Можно ли найти родительский CSS, который приводит к тому, что правило становится недоступным для значения в Инспекторе Chrome?

Question

Я редактирую нижний колонтитул существующего веб-сайта, чтобы он соответствовал ширине части над ним. Эта строка недоступна в веб-инспекторе Chrome. Как найти CSS, который сообщает эту ширину?

Что это означает, когда правило CSS отображается серым в инспекторе элементов Chrome? отвечает на вопрос, почему это происходит, но теперь, как это решить.

Answer 1

Вы смотрите на вкладку Computed , которая полностью отличается от Styles , на которую ссылался другой Q / A.

В * 1007На вкладке * Computed вы получите те же результаты, что и при вызове элемента getComputedStyle. Как вы, возможно, знаете, эти значения не обязательно являются авторскими.

Значение, выделенное серым цветом, означает, что это значение не было назначено никаким явным правилом, но, например, здесь, это потому, что содержимое страницысделал вычисленный ширина 981px. Если бы вы установили правило для этого элемента, у вас было бы складное меню, сообщающее, какое правило было применено.

.with-rule {
  width: auto; /* even if authored as auto */
}

<div class="no-rule">My width will be greyed out in the Computed Tab</div>
<div class="with-rule">I will have  a collapsible menu</div>

Теперь, возможно, вам следует предпочесть вкладку Styles , которая даст вам больше информации о действующих правилах , которыеприменяются к вашему элементу.