CSS: Nie można zastąpienia dziedziczonych text-decoration nieruchomość

Question

ja zamierzam wykorzystać taką tabelę CSS dla mojego 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} 

ale podczas próby, aby zastosować go do dokumentu

<span class="menu"> 
    Some underlined text came here... 
    <a href="...">this text should not be underlined until mouse on!</a> 
</span> 

I znaleziono nieoczekiwane zachowanie: tekst linku zawsze pozostaje podkreślony. Co robię źle? Czy to zależy od przeglądarki (używam przeglądarki Mozilla Firefox 3.5.6, prawdopodobnie IE 6.0 wyświetla ją poprawnie)? Jeśli tak, jak mogę w ogóle polegać na CSS? Co powinienem użyć, żeby go zastąpić?

(W rzeczywistości zwykle mam dowiedział się nowych języków programowania bardzo szybko i nigdy nie miałem żadnych problemów z podstawy programowania aż zacząłem HTML i CSS. Albo jestem niezgodna z nim lub jego cech nigdy nie opisał wystarczająco dobrze.)

Answer 1

Po szybkiej gry z niektórych CSS, obejście (co jest okropny, ale działa) byłoby wykonać następujące czynności w CSS:

.menu span {text-decoration:underline;} 

... w miejsce pierwszy linia twojego przykładowego CSS. Następnie w HTML wykonaj następujące czynności:

<span class="menu"> 
    <span>Some underlined text came here...</span> 
    <a href="...">this text should not be underlined until mouse on!</a> 
    <span>Some more underlined text came here...</span> 
</span> 

To dalekie od doskonałości, ale to najlepsze, co mogę wymyślić na chwilę.

Answer 2

Czy próbowałeś dodając:

.menu a {text-decoration:none} 

przed wszystkimi innymi zasadami? Wystarczy, że ustanowimy wartość domyślną, która zostanie następnie zastąpiona przez regułę a:hover.

Answer 3

Upewnij się, że jest to poprawne łącze wewnątrz href. Jeśli nie dostarczy tego stylu:

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

i href ma zawartość, niektóre przeglądarki nie będą traktować go jako link a nie domyślne renderowanie tekstu. Na przykład <a href=""> nie będzie przyjmował stylu .menu a:link, przejdzie do domyślnych stylów .menu, ponieważ nie ma łącza i nie jest renderowany jako taki przez niektóre przeglądarki.

Oczywiście zakryj swoje bazy, włączając w selektor czysty numer a.

Dodatkowo, upewnij się, że zakończyłeś te style kolorów za pomocą średników, aby uzyskać prawidłową składnię CSS.

Answer 4

Do tekstu, który chcesz podkreślić, użyj <u>blabla</u> (zrób to w HTML). To nie będzie dziedziczyć, a następny link nie zostanie podkreślony.