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


196

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

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

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


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

Ответы:


284

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

Скриншот Chrome


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

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

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

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

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

7

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

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


2

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

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


4
Это не тот случай, когда стиль помечен как! Важный
JCorriveau
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.