web-dev-qa-db-fra.com

Que signifient les propriétés de style croisées dans Google Chrome devtools?

Lors de l'inspection d'un élément à l'aide des outils de développement de Chrome, dans la barre des éléments, la barre de droite "Styles" affiche les propriétés CSS correspondantes. Parfois, certaines de ces propriétés sont barrées. Que signifient ces propriétés?

cssgoogle-chromegoogle-chrome-devtools
244
rohitmishra

Lorsqu'une propriété CSS apparaît barrée, cela signifie que le style barré a été appliqué, mais qu'il a ensuite été remplacé par un sélecteur plus spécifique, une règle plus locale ou une propriété ultérieure dans la même règle.

(Cas spéciaux: un style sera également indiqué comme barré si un style existe dans une règle de correspondance mais est mis en commentaire ou si vous l'avez désactivé manuellement en le décochant dans les outils de développement Chrome. Il sera également indiqué comme 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ée à toutes les divs, mais qu'une couleur d'arrière-plan différente a été appliquée à divs avec un certain identifiant, la première couleur apparaîtra mais sera barrée, le second color l’a remplacée (dans la liste des propriétés pour div avec cet identifiant).

287
Jacob Mattison

Sur une note de côté. Si vous utilisez des requêtes @ media (telles que @media screen (max-width:500px)), portez une attention particulière à l'application de la requête @media APRÈS vous avez terminé avec les styles normaux. Parce que la requête @media sera barrée (même si elle est plus spécifique) si elle est suivie par css qui manipule les 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 **
11
sanjihan

En plus de la réponse ci-dessus, je souhaite également souligner un cas de propriété rayée qui m'a vraiment surpris.

Si vous ajoutez une image d’arrière-plan à une div:

<div class = "myBackground">

</div>

Vous souhaitez redimensionner l'image pour l'adapter aux dimensions de la div. Cette définition correspond donc à 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 échangez la commande en tant que: -

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

puis, dans chrome, vous verrez taille de l’arrière-plan supprimé. Je ne sais pas pourquoi, mais oui, vous ne voulez pas vous tromper.

9
Rishul Matta

Si vous souhaitez appliquer le style même après avoir obtenu l'indication d'aboutissement, vous pouvez utiliser "!important" pour appliquer le style. Ce n'est peut-être pas une bonne solution, mais résolvez le problème.

6
Nanda