Что означают свойства скрещенных стилей в devtools в Google Chrome?

При проверке элемента с помощью devtools в Chrome на вкладке «Элементы» в правой части панели «Стили» отображаются соответствующие свойства CSS. Иногда некоторые из этих свойств зачеркнуты. Что означают эти свойства?

Когда свойство CSS отображается как зачеркнутый, это означает, что зачеркнутый стиль был применен, но затем переопределен более конкретным селектором, более локальным правилом или более поздним свойством в том же правиле.

(Особые случаи: стиль также будет отображаться как зачеркнутый, если стиль существует в соответствующем правиле, но закомментирован, или если вы вручную отключили его, сняв флажок в инструментах разработчика Chrome. Он также будет показан как скрещенный out, но со значком ошибки, если у стиля есть синтаксическая ошибка.)

Например, если цвет фона был применен ко всем divs, но другой цвет фона был применен к divs с определенным идентификатором, первый цвет будет отображаться, но будет зачеркнут, поскольку второй цвет заменил его (в свойстве список для divс этим идентификатором).

На боковой ноте. Если вы используете запросы @media (например, @media screen (max-width:500px)), обратите особое внимание на применение запроса @media ПОСЛЕ ТОГО, КАК вы сделали с обычными стилями. Потому что запрос @media будет вычеркнут (даже если он более конкретен), если за ним последует css, который манипулирует теми же элементами. Пример:

@media (max-width:750px){
#buy-box {width: 300px;}
}

#buy-box{
width:500px;
}

** width will be 500px and 300px will be crossed out in Developer Tools. **

#buy-box{
width:500px;
}

@media (max-width:750px){
#buy-box {width: 300px;}
}

** width will be 300px and 500px will be crossed out **

В дополнение к вышеупомянутому ответу я также хочу выделить случай вычеркнутой собственности, которая действительно удивила меня.

Если вы добавляете фоновое изображение в div:

<div class = "myBackground">

</div>

Вы хотите масштабировать изображение, чтобы оно соответствовало размерам элемента div, чтобы это было обычное определение класса.

.myBackground {

 height:100px;
 width:100px;
 background: url("/img/bck/myImage.jpg") no-repeat; 
 background-size: contain;

}

но если вы поменяете порядок следующим образом:

.myBackground {
 height:100px;
 width:100px;
 background-size: contain;  //before the background
 background: url("/img/bck/myImage.jpg") no-repeat; 
}

тогда в хроме вы увидите размер фона как вычеркнутый. Я не уверен, почему это так, но да, вы не хотите возиться с этим.

Если вы хотите применить стиль даже после получения обозначения пробития, вы можете использовать его "!important"для применения стиля. Это может быть не правильным решением, но решить проблему.

В некоторых случаях вы копируете и вставляете код CSS где-то, и это нарушает формат, поэтому Chrome отображает предупреждение желтого цвета. Вы должны попытаться переформатировать код CSS снова, и это должно быть хорошо.