2013-10-14 28 views
12

Ho un div in cui mi piacerebbe sovrascrivere il mio stile di collegamento globale. Ho due stili di collegamento, uno globale e uno specifico. Ecco il codice:ignora lo stile di collegamento all'interno di un html div

A:link {text-decoration: none; color: #FF0000;} 
A:visited {text-decoration: none; color: #FF0000;} 
A:hover {text-decoration: none; color: #FF0000;} 
A:active {text-decoration: none; color: #FF0000;} 

#macrosectiontext 
{ 
    position:relative; 
    font:Arial, sans-serif; 
    text-align:center; 
    font-size:50px; 
    font-style: bold; 
    margin-top:245px; 
    opacity: 0.6; 
    background-color:transparent; 
} 

#macrosectiontext A:link {text-decoration: none; color: #000000;} 
#macrosectiontext A:visited {text-decoration: none; color: #FFFFFF;} 
#macrosectiontext A:hover {text-decoration: none; color: #FFFFFF;} 
#macrosectiontext A:active {text-decoration: none; color: #FFFFFF;} 

e io uso il div in questo modo:

<div id="macrosectiontext"><a href="www.google.it">bla bla bla</a></div> 

tuttavia sembra che non funziona. Il div eredita ancora lo stile di collegamento globale.

+0

Non sto vedendo un collegamento di ancoraggio nel tuo codice HTML –

+1

Basta scrivere '#macrosectiontext a {color: # 000000};' questo funzionerà –

+0

Funziona bene per me. Ecco un [jsfiddle] (http://jsfiddle.net/Xz8KQ/). –

risposta

7
  1. nel CSS Non vorrei usare l'id "#macrosectiontext a: link ..." per il codice di collegamento vorrei utilizzare una classe ".macrosectiontext"

  2. utilizzare un minuscolo "un "invece di un cappuccio" A "nello stile di collegamento

  3. Se si utilizza lo stile solo poche volte è possibile utilizzare un tag span attorno al collegamento e quindi chiamare il proprio stile dal tag span invece del div .

+0

Il primo punto citato è la chiave. assegnare una classe per il collegamento e definire il colore all'interno della classe. freddo! – spiderman

10

I CSS funzionano sull'ereditarietà, quindi è necessario ignorare solo le proprietà che si desidera modificare.

cerca sempre di scrivere codice HTML & minuscolo CSS, ancora il vostro HTML e CSS sono corretti

a:link, a:visited, a:hover, a:active { 
    text-decoration: none; color: #f00; 
} 

#macrosectiontext { 
    position:relative; 
    font:Arial, sans-serif; 
    text-align:center; 
    font-size:50px; 
    font-style: bold; 
    margin-top:245px; 
    opacity: 0.6; 
    background-color:transparent; 
} 

#macrosectiontext a:link {color: #000;} 
#macrosectiontext a:visited, #macrosectiontext a:hover, 
#macrosectiontext a:active { 
    color: #fff; 
} 

ho made a fiddle for you per mostrare il codice sta lavorando (cambiato il colore hover, solo per demo)