Что означают свойства перечеркнутого стиля в Google Chrome devtools?

Ответ 1

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

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

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

Ответ 2

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

Если вы добавляете фоновое изображение в 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 вы увидите фоновый размер как вычеркнутый. Я не уверен, почему это так, но да, вы не хотите с ним связываться.

Ответ 3

На боковой ноте. Если вы используете @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 **

Ответ 4

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

Ответ 5

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