Perché nth-child selector non funziona?

Sto usando la nth-child selettore per aggiungere immagini di sfondo per diverse icone sociali. Tuttavia, tutte le icone che compaiono lo stesso. Che cosa sto facendo di sbagliato?

CSS:

.social-logo {
    display: inline-block;
    width: 24px;
    height: 24px;
    transition: background-image .2s;
}

#social-links div:nth-child(1) {
    background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-linkedin.svg');
}

#social-links div:nth-child(1):hover {
    background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-linkedin-copy.svg');
}

#social-links div:nth-child(2) {
    background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-dribbble.svg');
}

#social-links div:nth-child(2):hover {
    background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-dribbble-copy.svg');
}

#social-links div:nth-child(3) {
    background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-email.svg');
}

#social-links div:nth-child(3):hover {
    background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-email-copy.svg');
}

#social-links div:nth-child(4) {
    background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-insta.svg');
}

#social-links div:nth-child(4):hover {
    background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-insta-copy.svg');
}

HTML:

<div id="social-links">
  <a href=""><div class="social-logo"></div></a>
  <a href=""><div class="social-logo"></div></a>
  <a href=""><div class="social-logo"></div></a>
  <a href=""><div class="social-logo"></div></a>
</div>

InformationsquelleAutor Govind Rai | 2017-01-26



3 Replies
  1. 12

    Il nth-child selettore conta fratelli e sorelle (cioè, elementi che hanno lo stesso genitore).

    Nella vostra struttura HTML, div.social-logo è sempre il primo, l’ultimo e unico figlio di a. Così nth-child ha un solo elemento di conte.

    Tuttavia, ci sono molti elementi di ancoraggio, che sono fratelli (figli di #social-links), così nth-child possibile destinazione di ciascuno.

    #social-links a:nth-child(1) div 
    #social-links a:nth-child(2) div 
    #social-links a:nth-child(3) div 
                  .
                  .
                  .
    • ah, mi ci è voluto un po ‘ per digerire, ma hai assolutamente ragione. In questo caso, sarebbe appena mi consiglia l’aggiunta di una classe per ogni div, dal momento che questo schema di gioco (almeno per me) non è così leggibile.
    • nth-child funziona bene. Hai solo bisogno di applicare correttamente. Ricordate che è sempre valido (e conta tutti i fratelli.
    • Ho contribuito con una risposta canonica diversi anni fa, tuttavia è stata una tangenziale punto a un altro e mal pensato domanda su una completamente estranei argomento, che lo rende inadatto destinazione duplicato. Sto pensando di migrare il canonico risposta a una nuova domanda con il titolo di “Fare i selettori come :primo-bambino e :nth-child() vai sul padre elemento o elemento figlio?” Voi cosa ne pensate?
    • leggendo il tuo canonica, è una grande risposta. Penso che la migrazione idea più adatto domanda fa un sacco di senso. Una chiara e completa post sembra essere mancante per questa domanda molto comune. (Quando ho modificato questo post per formulare una più pertinente titolo, ero un po ‘ sorpreso che il nuovo titolo non esiste già. LOL!)
    • È facile scrivere male i titoli delle domande, e diabolicamente difficile per scrivere buoni.
    • Non ho ancora inviato la risposta canonica, ma dare un’occhiata a ciò che è diventato di quello vecchio 😛

  2. 1

    Provare questo!

    <div id="social-links">
      <a href=""><div class="social-logo"></div></a>
      <a href=""><div class="social-logo"></div></a>
      <a href=""><div class="social-logo"></div></a>
      <a href=""><div class="social-logo"></div></a>
    </div>

    CSS

    .social-logo {
        display: inline-block;
        width: 24px;
        height: 24px;
        transition: background-image .2s;
    }
    
    #social-links a:nth-child(1) .social-logo {
        background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-linkedin.svg');
    }
    
    #social-links a:nth-child(1):hover .social-logo {
        background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-linkedin-copy.svg');
    }
    
    #social-links a:nth-child(2) .social-logo {
        background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-dribbble.svg');
    }
    
    #social-links a:nth-child(2):hover .social-logo {
        background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-dribbble-copy.svg');
    }
    
    #social-links a:nth-child(3) .social-logo {
        background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-email.svg');
    }
    
    #social-links a:nth-child(3):hover .social-logo {
        background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-email-copy.svg');
    }
    
    #social-links a:nth-child(4) .social-logo {
        background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-insta.svg');
    }
    
    #social-links a:nth-child(4):hover .social-logo {
        background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-insta-copy.svg');
    }

    Demo live – https://jsfiddle.net/g59wa8uf/

  3. 1

    Sulla mia pagina di prova è stato perché la


    tag rompere il conteggio sul selettore di logica.

    • Si prega di ri-modificare la tua risposta per essere più facile da capire, e un esempio di come per risolvere il problema, sarebbe bello.

Lascia un commento