Come dare un colore diverso ad un elemento della lista con i CSS?

So che questa domanda è stato chiesto tante volte prima. Ma non riesco proprio a trovare il trucco giusto per il mio codice. Ho voglia di un colore diverso per il mio attivo voce di elenco nella barra di navigazione. Ovviamente. Stupida cosa. So. Ma per favore, cerchiamo di aiutare.

Ecco il mio HTML codice:

<div id="container">  
    <ul id="nav">  
        <li class="active"><a href="am_home.html">Home</a></li>  
        <li><a href="am_teachingassistants.php">Teaching Assistants</a></li>  
        <li><a href="am_courseinfo.php">Course Info</a></li>  
        <li><a href="am_timetable.php">Time Table</a></li>  
    </ul>  
</div>  

ed Ecco il CSS file:

#container {
    position: relative;
    top: -2em;
    z-index: 2;
    width: 1200px;
    margin: auto auto;
}

#nav {
   position: relative;
   float: left;
   margin-left: 400px;
}

#nav li {
    list-style: none;
    float: left;
    border-right: 1px solid #afc4cc;
}

#nav li a {
   position: relative;
   z-index: 2;
   float: left;
   padding: 5px 45px;
   font-size: 15px;
   font-weight: bold;
   font-family: helvetica, arial, sans-serif;
   text-decoration: none;
   color: #39aea8;
}

ul, li {
    margin: 0;
    padding: 0;
}

ul#nav li a:link,ul#nav li a:visited {
    color: #39aea8;
    text-decoration: none;
}

ul#nav li a:hover,ul#nav li a:active {
    color: #f4ba51;
    text-decoration: none;
}
  • basta dare selezionata li una classe che ha un altro colore.
  • ul#nav li.attivo a { color: #f4ba51 ; }
InformationsquelleAutor Cullen | 2012-10-26



2 Replies
  1. 15

    C’è qualcosa di sbagliato con il tuo codice CSS. Basta sostituire questo:

     ul#nav li a:hover,ul#nav li a:active{    
    }

    con questo:

     ul#nav li a:hover,ul#nav li.active a{
     //here styling 
    }

    e vi sono buone per andare. Hai solo fatto un errore durante la chiamata attiva classe nel CSS.

    • Hey. Ha funzionato! Grazie! 😀 io ancora non riesco a capire l’errore. Hai preso elemento attivo come una classe di qui. giusto?
    • è un link pseudo classe, che corrisponde a mentre un link viene cliccato. Questo non ha nulla a che fare con .active, che si riferisce al valore del class attributo HTML. Penso che non si deve sostituire (perchè la tua regola con :active, potrebbero essere utili per voi), invece di aggiungere una nuova regola con #nav .active a.
    • Capisco quello che vuoi dire. Ma io non lo uso :attivo in qualsiasi altro modo, per ora. manterrà il vostro punto nella mente, se io sto usando come un vero e proprio pseudo classe. Grazie.
  2. 2
    ul#nav li.active a { color: #f4ba51 ; }
    • Sì. Ho capito. Dovuto cambiare attivo classe di riferimento. Grazie. 🙂

Lascia un commento