Autor Zpráva
FraK
Profil *
Dobrý den,
mám dotaz, který jsem již vyřešil, nicméně není mi jasný princip.
<html>
<div id="text">
<ul id="navigation">
<li><a href="art_list.php" id="current">A — Z</a></li>
<li><a href="art_name.php" >Name</a></li>
<li><a href="art_search.php" >Search</a></li>
<ul id="abc">
<li><a href="art_list.php?lett=A">A</a></li>
</ul>
</ul>
</div>
</html>

css:
...
div#text a:link { color: #9c2a00; text-decoration: none;}
div#text a:visited {color: #f3f3f3; text-decoration: none;}
div#text a:hover { background-color: transparent; color: #663300 ;text-decoration: none;}

#navigation li a:link {background-color: #869DD6; color: #E0FFFF; }
#navigation li a:visited {background-color: #869DD6; color: #E0FFFF; }
#navigation li a:hover {background-color: #869DD6; color: #E0FFFF; }

Problém jest ten, že mi přes (podle mého) jasnou deklaraci #navigation li a:hover přejímal nadřazené a:hover z #text. Fungfuje to při deklaraci:
ul#navigation li a:hover {background-color: #869DD6; color: #E0FFFF; }. Nicméně mi není jasné, proč? Můžete mne nějak "nakopnout"?

Dík
Plaváček
Profil
FraK

Viz http://www.webtip.cz/art/wt_tech_html/wt_cssserial_004.html , hledej specifičnost selektorů. Zápis div#text je více konkrétní (specifický), než zápis #navigation li, proto má přednost. Na uvedeném odkazu je vysvětlen způsob výpočtu specifičnosti, je dobré na to brát zřetel (a pochopit ho :)
FraK
Profil *
Děkuji, něco podobného jsem potřeboval
Toto téma je uzamčeno. Odpověď nelze zaslat.

0