wake-up-neo.com

CSS-Hintergrundfarbe für Listenelement mit Klasse ändern

Ich versuche, die Hintergrundfarbe eines Listenelements zu ändern, während für andere Listenelemente eine andere Hintergrundfarbe vorhanden ist.

Das ist was ich habe:

<style type="text/css">
    
ul.nav li
{
  display:inline;
  padding:1em;
  margin:1em;
  background-color:blue;
}
    
    
.selected
{
  background-color:red;
}
   
<ul class="nav">
 <li>Category 1</li>
 <li>Category 2</li>
 <li class="selected">Category 3</li>
 <li>Category 4</li>
</ul>

Was erzeugt wird, sind alle Listenelemente mit blauem Hintergrund (aus der "nav" -Klasse), als gäbe es keine "ausgewählte" Klasse. Wenn ich jedoch die Hintergrundfarbe aus der "nav" -Klasse herausnehme, erhalte ich den roten Hintergrund für das Listenelement mit der "ausgewählten" Klasse. 

Ich möchte die "ausgewählte" Klasse für andere Elemente auf der Seite verwenden (d. H. Andere Listenelemente, divs usw.).

Wie würde ich das Problem lösen?

Danke im Voraus.

11
user614972

Dies ist ein Problem der Selektor-Spezifität . (Der Selektor .selected ist less spezifisch als ul.nav li.)

Um dies zu beheben, verwenden Sie in der Überschreibungsregel so viel Spezifität wie im Original:

ul.nav li {
 background-color:blue;
}
ul.nav li.selected {
 background-color:red;
}

Sie können auch erwägen, die Variable ul zu nixieren, es sei denn, es werden andere .navs angezeigt. So:

.nav li {
 background-color:blue;
}
.nav li.selected {
 background-color:red;
}

Das ist ein bisschen sauberer, weniger tippen und weniger Bits.

16
D_N

Das ul.nav-li ist restriktiver und hat daher Vorrang. Versuchen Sie Folgendes:

ul.nav li.selected {  
  background-color:red; 
}

Live Demo


Wenn Sie möchten, dass dies abhängig von der Seite Ihres Benutzers hervorgehoben wird, führen Sie folgende Schritte aus:

So markieren Sie Ihr aktuelles Navigation, beschriften Sie zuerst Ihre Körper-Tags mit einer ID oder Klasse, die mit der .__ übereinstimmt. Abschnitt der Site (normalerweise ein -Verzeichnis), in dem sich die Seite befindet.

<body class="ab">

Wir beschriften alle Dateien in "/about/".__". Verzeichnis mit der Klasse "ab". Hinweis dass wir hier eine Klasse verwenden, um die Körper-Tags. Wir fanden das mit einer ID im Körper funktionierte nicht konsequent in einigen älteren Browsern. Als Nächstes beschriften wir unsere Menüpunkte, damit wir sie anvisieren können individuell also:

<div id="n"> <a class="b" id="hm"
href="/">Home</a> ... <a class="b"
id="ab" href="/about/">About</a> ...
</div>

Beachten Sie, dass wir die utton-Klasse "b" für .__ verwenden. beschriften Menüelemente als Schaltflächen und eine ID ("ab"), um jeden eindeutigen Menüpunkt zu bezeichnen (in diesem Fall ungefähr). Jetzt brauchen wir alles ist ein CSS-Selektor, der mit der .__ übereinstimmt. Körperbeschriftung mit dem entsprechenden Menü Beschriftung wie folgt:

body.ab #n #ab, body.ab #n #ab
a{color:#333;background:#dcdcdc;text-decoration:none;}

Dieser Code hebt effektiv das .__ hervor. "Über" Menüelement und lässt es erscheinen dunkelgrau. Wenn Sie den Rest von .__ beschriften. die Site und Menüpunkte, Sie werden enden mit einem gruppierten Selektor, der aussieht etwas wie das:

body.hm #n #hm, body.hm #n #hm a,
body.sm #n #sm, body.sm #n #sm a,
body.is #n #is, body.is #n #is a,
body.ab #n #ab, body.ab #n #ab a, 
body.ct #n #ct, body.ct #n #ct
a{color:#333;background:#dcdcdc;text-decoration:none;}

Zum Beispiel, wenn der Benutzer zu .__ navigiert. Der Sitemap-Abschnitt der .sm-Klasse body tag entspricht der #sm-Menüoption und löst das CSS-Highlight von .__ aus. "Sitemap" in der Navigationsleiste.

Quelle

1
Myles Gray

Szenario: Ich habe ein Navigationsmenü wie dieses. Hinweis: Link <a> is child of list item <li>. Ich wollte den Hintergrund des ausgewählten Listenelements ändern und die Hintergrundfarbe des nicht ausgewählten Listenelements entfernen.

<nav>
        <ul>
            <li><a href="#">Intro</a></li>
            <li><a href="#">Size</a></li>
            <li><a href="#">Play</a></li>
            <li><a href="#">Food</a></li>
        </ul>
        <div class="clear"></div>

       </nav>

Ich habe versucht, eine Klasse .active mit jQuery in das Listenelement einzufügen, aber es funktionierte nicht

.active
{
    background-color: #480048;
}

$("nav li a").click(function () {
        $(this).parent().addClass("active");
        $(this).parent().siblings().removeClass("active");
    });

Lösung: Grundsätzlich funktioniert die Verwendung der .active-Klasse, die die Hintergrundfarbe des Listenelements ändert, nicht. Also habe ich den css-Klassennamen von .active in "nav li.active a" geändert. Mit demselben Javascript wird die .active-Klasse zum ausgewählten Listenelement hinzugefügt. Wenn nun das Listenelement <li> die Klasse .active hat, ändert css die Hintergrundfarbe des untergeordneten Elements dieses Listenelements <a>..

nav li.active a
{
    background-color: #480048;
}
1
Goldfish

1) Sie können die !important-Regel wie folgt verwenden:

.selected
{
  background-color:red !important;
}

Siehe http://www.w3.org/TR/CSS2/cascade.html#important-rules für weitere Informationen.

2) In Ihrem Beispiel können Sie den roten Hintergrund auch mit ul.nav li.selected anstelle von .selected erhalten. Dies macht den Selektor genauer.

Siehe http://www.w3.org/TR/CSS2/cascade.html#specificity für weitere Informationen.

0
DigitalDan