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
    4,431
    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à
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  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,977
    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
    ISSlive , un bot per Telegram per trovare tutti i passaggi visibili della Stazione Spaziale Internazionale.

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 © 2019 vBulletin Solutions, Inc. All rights reserved.