Інструменти для розробників Chrome: як дізнатися, що переважає правило CSS?

196

Ну, це досить просто. Якщо Інструменти для розробників Chrome показують мені, що стиль перекрито, як зрозуміти, яке правило CSS його перекриває?

Я хочу знати, чи є щось на кшталт "Покажіть мені, що це перекриває" .

ЗАБЕЗПЕЧЕННЯ: Будь ласка, не вказуйте мені на Firebug.

— Рамон К.
джерело

Інструменти для розробників Chrome також показують вам головне правило

— Zoltan Toth

Відповіді:

283

Використовуйте панель Computed Style інспектора елементів. Розкрийте майно, що цікавить, щоб побачити список застосовних правил, і яке з них виграло.

Скріншот Chrome

— josh3736
джерело

Для мене обчислювальна вкладка була відкрита за замовчуванням, а тому не вказана як вкладка, у неї повинна була бути заголовка "Обчислено", інакше ви могли довго шукати.

— MrFox

Техніка трохи змінилася, коли Chrome розвинувся. Замість "Розгорніть цікавить властивість" натисніть шпигун поруч із власністю, і на вкладці "Стилі" відобразиться стиль повернення.

— інтохо

@intotecho: Chrome 47 відновив експандо на вкладці «Обчислені» з моменту всмоктування зміни лупи. crbug.com/496263

— josh3736

що робити, якщо ВСІ з них скасовуються? Можливо, завдяки сценарію? Як ви дізнаєтесь, хто це зробив?

— darkgaze

Він все ще є як вкладка "Обчислені" на панелі "Елементи".

— josh3736

Ви можете просто подивитися на ті самі назви, які не закреслені, пам’ятайте, що перелік важливий.

Або ви можете переглянути обчислювані стилі. Вони будуть фактично застосованими стилями.

— user1902091
джерело

crtrl + shift + c і оглянути елемент. Потім знайдіть стиль без лінії через нього в полі в нижньому правому куті.

переосмислення в більшості випадків знаходиться вгорі (і без лінії через нього, оскільки цей стиль є "виграшним").

— Пітер Расмуссен
джерело

Це не той випадок, коли стиль позначений як! Важливо

— JCorriveau