Что означают свойства скрещенного стиля в инструментах разработчика Google Chrome?

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

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

Например, если цвет фона был применен ко всем 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; 
}

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

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

Есть два способа узнать, какие правила имеют приоритет:

1. Найдите свойство в поле «Фильтр» в верхней части вкладки «Стили». Он покажет все правила, содержащие это свойство, при этом свойство будет выделено желтым цветом.

   

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

   

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