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

196

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

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

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

— Рамон К.
источник

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

— Zoltan Toth

Ответы:

284

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

Скриншот Chrome

— josh3736
источник

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

— MrFox

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

— интехо

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

— josh3736

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

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

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

— Josh3736

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

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

— user1902091
источник

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

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

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

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

— JCorriveau