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

Question

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

Answer 1

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

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

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

Answer 2

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

Answer 3

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

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

Answer 4

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

Answer 5

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