2016-03-25 13 views
0

ich wie ein HTML-Block haben:für ein Kind Element eine CSS proprty außer Kraft setzen

<div id="sidebar"> 
    <ul class="sidebar-menu"> 
     {% for name in name_list %} 
      {% if name == 'abc' %} 
       <li class="sub-menu special">...</li> 
      {% else %} 
       <li class="sub-menu">...</li> 
      {% endif %} 
     {% endfor %} 
    </ul> 
</div> 

Die CSS für diesen Block ist:

#sidebar { 
    width: 210px; 
    height: 100%; 
    position: fixed; 
    background: #EFF0F6; 
    overflow-y: scroll; 
} 

Jetzt will ich für Listenelement die Hintergrundfarbe außer Kraft setzen mit Klasse special zu schwarz. Aber ich kann es nicht überschreiben. Wie geht das?

Hinweis: Die Templating-Sprache ist Djangos Templating-Sprache.

+0

könnte man die Frage klarer zu machen? was genau versuchst du zu tun? –

+0

@JacobGray Derzeit ist für jedes Listenelement die Hintergrundfarbe # EFF0F6. Ich möchte die Farbe für jedes Element, in dem die Klasse 'special hinzugefügt wurde, in schwarz ändern. –

+2

Hat Mike Cs Antwort für Sie funktioniert? –

Antwort

4

Nur einen spezifischeren Selektor:

#sidebar .special { 
    background: #000; 
} 
0

Bitte versuchen Sie dies:

ul.sidebar-menu li.special{background-color:#000000} 
+0

Sie sollten wirklich '! Wichtig' vermeiden, wenn Sie nicht müssen. Es macht es viel schwieriger, andere Dinge in der Zukunft zu stylen. –

+0

Er sagte, er muss den Stil, der wichtig ist, übersteuern. – satya

+2

Sie müssen jedoch '! Wichtig' nur verwenden, wenn ein spezifischerer Selektor verhindert, dass Sie den Stil anwenden. Wenn derselbe Selektor zweimal auf der Seite erscheint, wird der letzte gesehen. '! wichtig' setzt im Grunde die gesamte Spezifikationskette zurück und macht die Dinge auf lange Sicht wirklich schwierig. –

Verwandte Themen