Что означает пересеченный стиль в Google Chrome devtools?

Question

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

Answer 1

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

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

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

Answer 2

На боковом примечании. Если вы используете @средства массовой информации Запросы (такие как @media screen (max-width:500px)) Обратите особое внимание на применение запроса @media ПОСЛЕ Вы сделали с нормальными стилями. Поскольку @media Query будет вычеркнуть (даже если оно более конкретно), если затем 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 вы посмотрите Фон-размер как поразил. Я не уверен, почему это, но да, ты не хочешь связываться с этим.

Answer 4

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

Answer 5

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