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

196

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

Я хочу знать, есть ли что-нибудь вроде «Покажи мне, что это отменяет» .

OBS: Пожалуйста, не указывайте мне на Firebug.

css google-chrome developer-tools inspector Рамон К.
источник

Инструменты разработчика Chrome также показывают главное правило

Zoltan Toth

Ответы:

284

Используйте панель « Вычисляемый стиль» инспектора элементов. Разверните интересующее свойство, чтобы увидеть список применимых правил, и какое из них победило.

Скриншот Chrome

josh3736
источник

Для меня вычисляемая вкладка была открыта по умолчанию и, следовательно, не указана как вкладка, у нее должен был быть заголовок «Вычислено», в противном случае вы могли бы искать в течение длительного времени.

MrFox

Техника немного изменилась по мере продвижения Chrome. Вместо «Развернуть интересующее свойство» щелкните шпионское стекло рядом со свойством, и оно покажет, какой стиль был отыгран на вкладке «Стили».

интехо

@intotecho: Chrome 47 восстановил экспансию на вкладке «Вычисленные» с тех пор, как увеличилось стекло. crbug.com/496263

josh3736

что если все из них будут отменены? Возможно из-за сценария? Как вы узнаете, кто это сделал?

темный взгляд

Он по-прежнему находится на вкладке «Вычисленные» на панели «Элементы».

Josh3736

Вы можете просто посмотреть на одноименные, которые не вычеркнуты, помните, что список важен.

Или вы можете просмотреть вычисленные стили. Они будут фактически примененными стилями.

user1902091
источник

crtrl + shift + c и осмотрите элемент. Затем найдите стиль без линии через него в поле в правом нижнем углу.

переопределение в большинстве случаев находится сверху (и без линии через него, поскольку этот стиль является «выигрышным»).

Питер Расмуссен
источник

Это не тот случай, когда стиль помечен как! Важный

JCorriveau