При проверке элемента с помощью devtools в Chrome на вкладке «Элементы» в правой части панели «Стили» отображаются соответствующие свойства CSS. Иногда некоторые из этих свойств зачеркнуты. Что означают эти свойства?
css
google-chrome
google-chrome-devtools
rohitmishra
источник
источник
Ответы:
Когда свойство CSS отображается как зачеркнутый, это означает, что зачеркнутый стиль был применен, но затем переопределен более конкретным селектором, более локальным правилом или более поздним свойством в том же правиле.
(Особые случаи: стиль также будет отображаться как зачеркнутый, если стиль существует в соответствующем правиле, но закомментирован, или если вы вручную отключили его, сняв флажок в инструментах разработчика Chrome. Он также будет показан как скрещенный out, но со значком ошибки, если у стиля есть синтаксическая ошибка.)
Например, если цвет фона был применен ко всем
div
s, но другой цвет фона был применен кdiv
s с определенным идентификатором, первый цвет будет отображаться, но будет зачеркнут, поскольку второй цвет заменил его (в свойстве список дляdiv
с этим идентификатором).источник
border-color
просто введитеborder-color
в фильтр. Он покажет все правила, содержащие это свойство, причем свойство будет выделено желтым цветом. Эта функция также доступна в Firefox.!important
который перезаписывает его.На боковой ноте. Если вы используете запросы @media (например,
@media screen (max-width:500px
)), обратите особое внимание на применение запроса @media ПОСЛЕ ТОГО, КАК вы сделали с обычными стилями. Потому что запрос @media будет вычеркнут (даже если он более конкретен), если за ним последует css, который манипулирует теми же элементами. Пример:источник
В дополнение к вышеупомянутому ответу я также хочу выделить случай вычеркнутой собственности, которая действительно удивила меня.
Если вы добавляете фоновое изображение в div:
Вы хотите масштабировать изображение, чтобы оно соответствовало размерам элемента div, чтобы это было обычное определение класса.
но если вы поменяете порядок следующим образом:
тогда в хроме вы увидите размер фона как вычеркнутый. Я не уверен, почему это так, но да, вы не хотите возиться с этим.
источник
Если вы хотите применить стиль даже после получения обозначения пробития, вы можете использовать его
"!important"
для применения стиля. Это может быть не правильным решением, но решить проблему.источник
В некоторых случаях вы копируете и вставляете код CSS где-то, и это нарушает формат, поэтому Chrome отображает предупреждение желтого цвета. Вы должны попытаться переформатировать код CSS снова, и это должно быть хорошо.
источник