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

    priorità tra div e class

    Ciao a tutti, nel mio foglio di stile, ho settato le proprietà dei link per un div

    ora, all'interno dello stesso div, vorrei cambiare soltanto le proprietà di uno dei link presenti.

    Per fare ciò ho pensato di scrivere un'apposita classe, da applicare a quel link.

    Quando visualizzo a video il contenuto vedo però tutto con le proprietà css del div

    Come posso risolvere ?
    Grazie a tutti per l'aiuto !
    aquatimer2000

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Ciao, prima di tutto bisogna assicurarsi che non ci siano errori nella stestura del CSS e relativo HTML, sarebbe quindi utile vedere il codice in questione.

    La priorità nell'applicazione delle regole CSS viene stabilita secondo il calcolo della specificità e, a parità di specificità, in base al punto in cui queste sono viste, per cui vale l'override. Nel caso ti interessi approfondire l'argomento, puoi dare uno sguardo al capitolo 2 dei link utili CSS, sotto la voce "specificità".

    In generale, in un selettore CSS a parità di complessità, ha priorità il nome-classe rispetto al nome-tag. Bisogna però vedere nel dettaglio se ci sono altri fattori che influiscono diversamente.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    codice:
    /* stile per  tutto il contenuto */
    div#contenuto a:link{
    color: blue;
    font-weight: bold;
    text-decoration: underline;
    }
    
    div#contenuto a:visited{
    color: blue;
    font-weight: bold;
    }
    
    div#contenuto a:hover{
    color: red;
    font-weight: bold;
    text-decoration: underline;
    }
    
    div#contenuto a:active{
    color: blue;
    font-weight: bold;
    }
    
    
    
    /* classe per il titolo */
    a.titolo:link{
    color: red;
    font-weight: bold;
    text-decoration: underline;
    }
    
    a.titolo:visited{
    color: red;
    font-weight: bold;
    }
    
    a.titolo:hover{
    color: red;
    text-decoration: underline;
    }
    
    a.titolo:active{
    color: red;
    font-weight: bold;
    }

    codice HTML:
    <div id="contenuto">
    <a href ="#" title="" class="titolo"><h1>TITOLO</h1></a>
    
    Testo vario ...
    </div>

    il link TITOLO lo vedo in blu !
    aquatimer2000

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Bene, già ad occhio vedo che i primi selettori sono chiaramente più "complessi" includendo addirittura il tag div e il suo id.
    Ad esempio questo selettore:
    codice:
    div#contenuto a:link
    presumibilmente ha una maggiorà specificità rispetto a questo:
    codice:
    a.titolo:link
    Per risolvere dovresti aggiungere la prima parte, usata nel primo selettore, anche sul secondo, in questo modo:
    codice:
    div#contenuto a.titolo:link
    ...e così per gli altri simili.



    PS: giusto una parentesi; in linea generale, in un selettore CSS, l'uso del nome-tag è ridondante quando già è specificato il suo id; questo perché (in uno stesso documento HTML) gli id devono essere univoci, per cui non dovrebbe essere possibile avere uno stesso id su diversi elementi.

    Non che sia errato, ma a livello di ottimizzazione, anziché div#contenuto sarebbe più opportuno usare semplicemente #contenuto.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  5. #5
    Perfetto ! ho corretto tutto il codice come mi hai suggerito ed ho anche tolto "div" davanti allo #

    Grazie 1000 per tutti i consigli !
    aquatimer2000

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.