2017-10-18 3 views
1

Je travaille sur une application Web dans laquelle les pages html & style CSS sont générées automatiquement. Nous sommes en mesure de remplacer le style CSS pour le personnaliser. J'ai essayé d'ajouter un fond à ma page d'accueil j'ai donc écrit ce style css:Comment appliquer le style CSS à seulement deux classes

.maintabitem-container.INXXJSB-l-d{ 
    background-image: url("../images/welcome_page_e-Life.jpg"); 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
} 

Je suis l'arrière-plan comme prévu, mais ce contexte a été appliqué à toutes les pages des autres dans ma demande, car ils contiennent div comme ceci:

<div class="maintabitem-container INXXJSB-l-d INXXJSB-h-f"> 

Existe-t-il un moyen d'appliquer ce style uniquement à deux classes?

+0

La 3ème classe dans cette liste, 'INXXJSB-h-f, est qu'unique par page? –

+0

Non c'est une classe commune entre toutes les autres pages –

+0

Tout simplement comme ceci: '[class = 'maintabitem-conteneur INXXJSB-l-d'] {background-image: url (" ../ images/welcome_page_f-Life.jpg ") ; taille de fond: 100% 100%; background-repeat: no-repeat; ', mais vous devriez être au courant des ordres des 2 classes, si elles sont inversées cela ne marchera pas. –

Répondre

2

Vous pouvez utiliser un sélecteur d'attribut comme ceci:

[class='maintabitem-container INXXJSB-l-d'] 
+1

[class = 'maintabitem-conteneur INXXJSB-l-d'] { background-image: url ("../ images/welcome_page_f-Life.jpg"); taille de fond: 100% 100%; Background-repeat: pas de répétition; } Comme ceci ?? –

+0

c'est exact –

+0

Oui exactement, Mark Steggles signifie que. Mais gardez-le à l'esprit si dans d'autres pages la classe contient les mêmes classes, elle s'appliquera aussi à ces pages. – Hanif

0

S'il vous plaît ajouter séparée classe ou id sur la section souhaitée. Mais évitez ce type de classe INXXJSB-l-dINXXJSB-h-f car il peut être modifié de sorte que vous aurez des problèmes car ces classes générées à l'exécution.

vous pouvez ajouter la classe diffrent comme .exampleClass { background-image: url("../images/welcome_page_e-Life.jpg");}