2017-03-29 3 views
0

Ich versuche, dass ein h1-Tag als zwei Farben, zum Beispiel in der "Hauptseite" der h1 ist rot, und in der "sekundären Seite" der h1 ist blau.<h> Tag andere Farbe in verschiedenen Seite

Ich versuche dies ohne Erfolg zu erreichen, ich habe dies mit einer Spanne gemacht, aber ich würde gerne wissen, ob es einen anderen Weg gibt, dies zu tun.

dies ist mein Code-Struktur

h1, h2, h3, h4, h5, p, li, ul, ol, a, a:hover, button { color: red; } 

h1 .h1cor{ 
    color: blue; 
} 
+1

Wordpress fügt typischerweise Körper Klassen Themen. Suchen Sie nach einem eindeutigen Body-Tag und wählen Sie diesen aus. Du könntest 'body.page-id-XXX h1 {// color}' –

+0

@TyBailey soo, im css der fraglichen Webseite, stelle ich body.page-id-main-page h1 {color = "blue" } –

+0

Nein, es würde nicht "Hauptseite" sagen, es wird eine tatsächliche numerische ID sein. Nicht alle Themen bieten dies, aber viele von ihnen tun dies. Klicken Sie mit der rechten Maustaste auf> Quelltext anzeigen und suchen Sie nach Body-Klassen. –

Antwort

1

du wie dies mit einer ID kann:

#secundarypage h1{ 
 
color:red; 
 
} 
 

 
#mainpage h1{ 
 
color:blue; 
 
}
<div id="mainpage"> 
 
    <h1>Heading for mainpage</h1> 
 
</div> 
 

 
<div id="secundarypage"> 
 
    <h1>Heading for secundary page</h1> 
 
</div>

+0

kann ich mehrere Tags in der ID haben, zum Beispiel #mainpage h1, h2, h3 {Farbe = "rot";} –

+0

Ja, überhaupt kein Problem. Sie können es so verwenden, wie Sie es normalerweise tun würden. – Ptrckk

1

Zuerst den Namen der Seite Sie sich gerade befinden erhalten durch den Einsatz diese

var url = window.location.href 
var getLink = url.split("/").pop(); 

Stellen Sie dann die Farbe nach dem Namen der Seite

if(getLink == 'mainPage'){ 
    $('h1').css("color","red"); 
}else if(getLink == 'secondary page'){ 
    $('h1').css("color","yellow"); 
} 
2

jede Seite einer einzigartigen Klasse oder id in der Seite wirft, die Klasse oder die ID der Seite als nehmen Referenz auf Stil h1 tag; zum Beispiel;

<body class="page-class">

.page-class h1{ 
    color:blue; 
} 
+0

Das stimmt nicht, dass * jede * Seite eine eindeutige Klasse hat. Einige Themen stellen die 'body_class()' Funktion nicht dar. Es ist eine schlechte Themenentwicklung, aber es kann nicht ausgeschlossen werden. –

Verwandte Themen