CSS: imansible eseguire l’override della proprietà di decorazione del testo ereditata

Userò tale tabella CSS per il mio menu:

.menu {text-decoration:underline;} .menu a:link {text-decoration:none; color:#0202C0} .menu a:active {text-decoration:none; color:#0202C0} .menu a:visited {text-decoration:none; color:#0202C0} .menu a:hover {text-decoration:underline; color:#0099FF} 

ma durante il tentativo di applicarlo al documento

  Some underlined text came herehttps://stackoverflow.com/questions/2111100/css-could-not-override-inherited-text-decoration-property/... this text should not be underlined until mouse on!  

Ho trovato un comportamento inaspettato: il testo del collegamento rimane sempre sottolineato. Cosa sto facendo di sbagliato? Potrebbe dipendere dal browser (sto usando Mozilla Firefox 3.5.6, probabilmente IE 6.0 lo visualizzerò correttamente)? In tal caso, come posso contare sul CSS? Cosa dovrei usare per sostituirlo?

(In realtà, di solito, ho imparato molto bene i nuovi linguaggi di programmazione e non ho mai avuto problemi con le basi di programmazione fino a quando non ho avviato HTML e CSS. O sono incompatibile con esso o le sue funzionalità non sono mai state raccontate abbastanza bene.)

Dopo una veloce riproduzione con alcuni CSS, una soluzione (che è orribile , ma funziona) sarebbe quella di fare quanto segue nel tuo CSS:

 .menu span {text-decoration:underline;} 

https://stackoverflow.com/questions/2111100/css-could-not-override-inherited-text-decoration-property/… al posto della prima riga del tuo campione CSS. Quindi in HTML fai quanto segue:

  Some underlined text came herehttps://stackoverflow.com/questions/2111100/css-could-not-override-inherited-text-decoration-property/... this text should not be underlined until mouse on! Some more underlined text came herehttps://stackoverflow.com/questions/2111100/css-could-not-override-inherited-text-decoration-property/...  

È lontano dall’essere perfetto, ma è il massimo che riesco a trovare per il momento.

Assicurati che sia un link valido all’interno di href. Se non fornisci questo stile:

 .menu a, .menu a:link{my styles} 

e href non ha contenuti, alcuni browser non lo tratteranno come un collegamento e renderanno il rendering di testo predefinito. Ad esempio, non assumerà lo stile di .menu a:link , andrà agli stili .menu predefiniti perché non esiste alcun collegamento e non viene visualizzato come tale da alcuni browser.

Ovviamente, copri le tue basi includendo la nuda a nel tuo selettore.

Inoltre, assicurati di terminare gli stili di colore con il punto e virgola per la corretta syntax CSS.

Hai provato ad aggiungere:

 .menu a {text-decoration:none} 

prima di tutte le altre regole? Solo per stabilire un valore predefinito che viene poi sostituito dalla regola a:hover .

Al testo che vuoi sottolineare, usa blabla (fallo in modo HTML). Questo non erediterà e il tuo prossimo link non uscirà sottolineato.