#safari #google-chrome-devtools
#safari #google-chrome-devtools
Вопрос:
Инструменты разработчика Safari / Chrome указывают, что правило CSS переопределяется чем-то другим, вычеркивая его, как показано на рисунке.
Иногда я оказываюсь в ситуации, когда не могу определить из файлов CSS, что приводит к игнорированию этого правила. Но, конечно, Safari сам должен знать, когда он выполняет это.
Есть ли способ узнать, что переопределяет такое правило?
Комментарии:
1. Dev tools показывает источник файла напротив селектора.
2. Возможно, вам будет полезно ознакомиться со справочной документацией по инструментам разработчика Chrome, а не ожидать краткого руководства отсюда.
Ответ №1:
Посмотрите на тот, который не вычеркнут, выше по списку.
В качестве альтернативы можно просмотреть вычисленные стили. Они будут окончательными применяемыми стилями.
Комментарии:
1. Спасибо, я пропустил, что Safari упорядочивает блоки по важности, а не по порядку CSS. Мой случай заключался в том, что более длинный селектор (table.class td) стал выше, чем более короткий, хотя и более специфичный селектор (.class), который соответствует одному td.
2. Обязательно используйте для этого панель » Вычисляемые стили «. Вы сможете точно увидеть каскад, который привел к окончательному вычисленному результату.
Ответ №2:
При проверке элемента можно отобразить «окно». В конце концов, у вас есть «фильтр», который должен показать вам все свойства, применяемые к вашему элементу.
Если вы нажмете на свойство, оно выдаст вам файл и номер строки.
Ответ №3:
Инструменты разработчика перечислят все правила для элемента. Просто прочитайте все применимые правила CSS и проверьте, нет ли не зачеркнутого с таким же именем.
Ответ №4:
Перейдите в Элементы >> Вычислено, и вы получите таблицу стилей, которая определяет правило, которое вы ищете.
Ответ №5:
Перейдите на вкладку «Вычисляемые» инструментов разработчика Chrome. Найдите нужное свойство и разверните подробную информацию.
