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

274

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

rohitmishra
источник
4
Я ожидал этого вопроса. +1 за это.
Раджеш Пол

Ответы:

314

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

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

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

Джейкоб Маттисон
источник
18
В дополнение к этому, перечеркнутые свойства могут быть теми, которые «отменяются» свойствами с таким же именем позже в том же правиле CSS (как требуется спецификацией CSS)
Александр Павлов
57
@JacobM: Как узнать, какое свойство переопределяет пораженное свойство.
ArunRaj
51
@ArunRaj - Нет простого способа определить, какое свойство (или свойства) переопределяет перечеркнутое. Одним из вариантов является поиск на вкладке «вычисляемые» стили, чтобы найти тот же тип свойства, а затем, если вы развернете его, вы должны увидеть источник различных правил, которые пытаются применить это свойство (включая то, которое действительно активно). , Поэтому, если вы видите, что «font-size: 11px» вычеркнуты, посмотрите в вычисляемых свойствах «font-size», и вы должны увидеть все места, где применяется font-size, включая фактически активный. Надеюсь это поможет.
Джейкоб Мэттисон
7
Теперь в верхней части вкладки «Стили» есть поле «Фильтр». Если вам интересно, что изменилось, border-colorпросто введите border-colorв фильтр. Он покажет все правила, содержащие это свойство, причем свойство будет выделено желтым цветом. Эта функция также доступна в Firefox.
Joeytwiddle
4
Также хотел бы добавить: если стиль вычеркнут, но он уже наверху, то у вас может быть где-нибудь стиль CSS, !importantкоторый перезаписывает его.
Доминик К
12

На боковой ноте. Если вы используете запросы @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 **
sanjihan
источник
Что делать, если медиа-запросы находятся в другом файле CSS?
Карлос Эрнандес Гил
11

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

Если вы добавляете фоновое изображение в 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; 
}

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

Ришул Матта
источник
8

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

Нанда
источник
У меня были проблемы с масштабированием GoogleMap для мобильных телефонов через медиа. У меня есть базовая настройка для браузеров (без медиа), за которой следуют различные медиа с меньшими размерами, что не работает (правильный стиль для мобильных устройств показан в GC, но с зачеркиванием). После того, как я добавил! Важно, это работает, но я не понимаю "логику", стоящую за этим ...
FredyWenger
-5

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

hien711
источник
2
Вопрос не задавал ничего о «желтых предупреждениях». Этот ответ должен комментировать в лучшем случае.
Саймон