Qu'est-ce que les propriétés de style croisées dans Google Chrome DevTools moyenne?

Question

Lors de l'inspection d'un élément à l'aide de devtools de Chrome, dans l'onglet éléments, le côté droit des spectacles de bar 'Styles des propriétés CSS correspondantes. Parfois, certaines de ces propriétés sont barrés. Qu'est-ce que ces propriétés,?

Answer 1

Quand une propriété CSS spectacles comme barrés, cela signifie que le barrée d'une croix de style a été appliqué, mais supplantée par un sélecteur plus spécifique, une règle plus locale ou par une propriété plus tard dans le même règle.

(Cas particuliers:. Un style sera également affiché comme barrés si un style existe dans une règle de correspondance, mais est commentée, ou si vous avez le désactivé manuellement en décochant dans les outils de développement Chrome Il sera également montrer que barré, mais avec une icône d'erreur, si le style a une erreur de syntaxe.)

Par exemple, si une couleur d'arrière-plan a été appliqué à tous divs, mais une autre couleur de fond a été appliqué à divs avec un certain id, la première couleur sera affiché mais sera barré, comme la deuxième couleur a remplacé ( dans la liste des propriétés du div avec cet identifiant).

Answer 2

Sur une note de côté. Si vous utilisez @media requêtes (par exemple @media screen (max-width:500px)) accorder une attention particulière à l'application @media requête après vous avez terminé avec des styles normaux. Parce que @media requête sera barré (même si elle est plus spécifique) si elle est suivie par les css qui manipule mêmes éléments. Exemple:

@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

En plus de la réponse ci-dessus, je veux aussi souligner un cas d'un bien qui me striked sur vraiment surpris.

Si vous ajoutez une image de fond à un div:

<div class = "myBackground">

</div>

Vous voulez redimensionner l'image pour l'adapter aux dimensions de la div alors ce serait votre définition de classe normale.

.myBackground {

 height:100px;
 width:100px;
 background: url("/img/bck/myImage.jpg") no-repeat; 
 background-size: contain;

}

mais si vous intervertir l'ordre: -

.myBackground {
 height:100px;
 width:100px;
 background-size: contain;  //before the background
 background: url("/img/bck/myImage.jpg") no-repeat; 
}

puis en chrome vous verrez taille de fond comme barrée. Je ne sais pas pourquoi il en est, mais oui vous ne voulez pas salir avec.

Answer 4

Si vous voulez appliquer le style même après avoir obtenu l'indication frappé le creux, vous pouvez utiliser "!important" pour faire respecter le style. Il ne peut pas être une bonne solution, mais résoudre le problème.

Answer 5

Il y a certains cas lorsque vous copiez et collez le code CSS dans quelque part et il se casse le format si Chrome affiche l'avertissement jaune. Vous devriez essayer de reformater le code CSS à nouveau et il devrait être bien.