Visualizzazione dei risultati da 1 a 4 su 4
  1. #1

    Colori link testuali ignorati

    Salve, mi sono bloccato sull'assegnazione dei colori dei link alla barra di menù, attraverso un file esterno miocss.css che dovrebbe sovrascrivere bootstrap.css.
    La situazione HTML del codice interessato è la seguente:
    codice HTML:
    <a class="navbar-brand" href="index.php">Titolo sito</a>
    ...
    <li class="nav-item"><a class="nav-link" href="a-c.php">A B C</a></li>
    Mentre lo stile:
    codice HTML:
    .navbar-brand > a {
        color: #fff;
        text-decoration: none;
        background-color: transparent;
    }
    .navbar-brand > a:hover {
        color: #ff8;
        text-decoration: none;
    }
    .nav-link > a {
        color: #fff;
        text-decoration: none;
        background-color: transparent;
    }
    .nav-link > a:hover {
        color: #ff8;
        text-decoration: none;
    }
    Il risultato è che vedo il testo del brand fisso bianco anche se ci passo sopra col mouse, mentre i vari link del menù seguono i colori di Bootstrap al passaggio del mouse!
    I fogli di stile sono richiamati in questo ordine che mi pare corretto:
    codice HTML:
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/miocss.css">
    Perché non riesco a sovrascrivere?

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Ciao, i selettori da te definiti sono strutturati in modo sbagliato rispetto a quel codice HTML.

    E' l'elemento <a> a possedere quelle classi, per cui i selettori dovrebbero essere impostati in questo modo:

    codice:
    a.navbar-brand {...}
    
    a.navbar-brand:hover {...}
    
    a.nav-link {...}
    
    a.nav-link:hover {...}
    .
    Inoltre la priorità di applicazione delle varie regole dipende prima di tutto dalla "specificità" dei selettori. Se i selettori da te definiti hanno un valore minore di specificità rispetto a quelli definiti per BS, anche se le tue regole sono lette per ultime non saranno comunque applicate.

    Attraverso la console web del tuo browser, nella scheda degli stili puoi verificare tu stesso quali regole vengono applicate per un dato elemento, e quali vengono sovrascritte.

    Se ti serve calcolare la specificità puoi usare questo strumento: Specificity Calculator
    Qui un articolo a riguardo: Calcolare la specificità
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Probabilmente mi sono perso qualche aggiornamento a riguardo, perché cercando qui nel forum ho trovato conferma che per assegnare un colore al testo dei link di una particolare classe, bisogna scrivere .nomeclasse > a { color: #ffff88; }

    Purtroppo trovo tante incongruenze e non sempre ci sono delle date per capire cosa è caduto in disuso! Quando insegnano programmazione fanno sembrare che il codice sia univoco, poi nella pratica escono le sorprese. E vorrei chiarire questi dubbi una volta per tutte, almeno fino al prossimo bombardamento di codici deprecati...

  4. #4
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    Quote Originariamente inviata da Gas75 Visualizza il messaggio
    Probabilmente mi sono perso qualche aggiornamento a riguardo, perché cercando qui nel forum ho trovato conferma che per assegnare un colore al testo dei link di una particolare classe, bisogna scrivere .nomeclasse > a { color: #ffff88; }

    Purtroppo trovo tante incongruenze e non sempre ci sono delle date per capire cosa è caduto in disuso! Quando insegnano programmazione fanno sembrare che il codice sia univoco, poi nella pratica escono le sorprese. E vorrei chiarire questi dubbi una volta per tutte, almeno fino al prossimo bombardamento di codici deprecati...
    Nel codice che hai postato tu, i link hanno classe navbar-brand e nav-link

    ergo, se vuoi dare uno stile a questi elementi ciò che ti ha scritto killerworm è corretto

    Il css che hai trovato tu non matcha nessun elemento del markup che hai scritto
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.