Autor Zpráva
AM
Profil *
Zdravím,
pokouším se udělat stránku, kde v určitém divu chci mít všechny odkazy <a>, u kterých nespecifikuji žádný další styl, jednou barvou. Do stejného divu chci ale vložit odkaz, který bude mít jinou barvu zadanou pomocí class. Nefunguje. Stylování pomocí ID taktéž nefunguje. Když jí zadám pomocí atributu style, funguje, ale to není ideální vzhledem k rozsahu a potřeby jednoduchosti webu.

Pro upřesnění, zjistil jsem, že to neplatí jen o color; pokud je vlastnost zadaná jak v definici pro nadřazený div, tak pro konkrétní odkaz, použije se nadřazená vlastnost, v podřazené definici ale mohu měnit ty vlastnosti, které v nadřazené nejsou.

Chová se tak i internet explorer, i opera. Z toho tedy soudím, že to není chyba zpracování, ale že se tak CSS má skutečně chovat, což ovšem nechápu, mohl by mi někdo vysvětlit, jak/proč tato dědičnost funguje a jak byste můj problém řešili vy? (řešení zrušit definici u nadřazeného divu a přidat všem "běžným" odkazům vlastní class se pro potřeby mého webu nehodí - registrovaní uživatelé mohou přidávat odkazy a nebylo by pro ně user-friendly, aby každému museli definovat třídu).

Pro názornost kód:
<html>
<head>
<style type="text/css">
#test a:link, #test a:visited{
color:red;
}
.barevny:link, .barevny:visited{
color:green;
font-weight:bold;
}
#zeleny:link, #zeleny:visited{
color:green;
font-weight:bold;
}

</style>
</head>
<body>
<div id="test">
<a href="#">odkaz 1</a><br>
<a href="#">odkaz 2</a><br>
<a href="#" id="zeleny">tenhle odkaz bych chtěl, aby byl zelený, ale on není</a><br>
<a href="#" class="barevny">tenhle odkaz bych chtěl, aby byl zelený, ale on není. Tučný ale bude, protože nadřazená definice odkazů neurčuje font-weight</a><br>
<a href="#" style="color:green">tenhle odkaz bude zelený</a><br>
</div>
</body>
</html>
Nox
Profil
AM
Určíš nadřazenost
{vlastnost: atribut !important;}
např.
{color: rgb(100,50,0) !important;}

Edit: koukám že sem si moc nepřečet dotaz...ach jo...
Bubák
Profil
!important jsem použil jen při ladění CSS, pak jsem to napsal "normálně".

AM
Souvisí to s konkrétností deklarace, dokonce to jde spočítat (neumím). Po naučení základních pravidel to dělám intuitivně:
#test a {
color:red;
}
#test a.barevny {
color:green;
font-weight:bold;
} 
a#zeleny {
color:green;
font-weight:bold;
}
Plaváček
Profil
Bubák

Říká se tomu specifičnost a spočítat to jde velmi snadno podle tohoto návodu (cituji z knihy Petra Staníčka):

Selektory, popisující, na které prvky se mají dané vlastnosti vztahovat, mohou být velmi obecné i velmi konkrétní. Čím konkrétnější selektor je, tím větší má přednost před jinými, obecnějšími. Specifičnost je v CSS vyjádřena exaktním algoritmem:

a = počet atributů ID v selektoru
b = počet jiných atributů a pseudo-tříd v selektoru
c = počet jmen prvků v selektoru (pseudo-prvky se ignorují)

Výslednou specifičností je pak číslo vzniklé spojením těchto tří hodnot: a-b-c

Příklad:

* {} /* a=0 b=0 c=0 -> specifičnost = 000 */
LI {} /* a=0 b=0 c=1 -> specifičnost = 001 */
UL LI {} /* a=0 b=0 c=2 -> specifičnost = 002 */
UL OL+LI {} /* a=0 b=0 c=3 -> specifičnost = 003 */
H1 + *[REL=up]{} /* a=0 b=1 c=1 -> specifičnost = 011 */
UL OL LI.red {} /* a=0 b=1 c=3 -> specifičnost = 013 */
LI.red.level {} /* a=0 b=2 c=1 -> specifičnost = 021 */
#x34y {} /* a=1 b=0 c=0 -> specifičnost = 100 */

Více zde i online: http://www.webtip.cz/art/wt_tech_html/wt_cssserial_004.html
Bubák
Profil
Plaváček
Díky za upřesnění.
Zatím jsem si vystačil jsem si s tím, co je v tebou odkázaném článku popsáno větou:
Nejsnazší pomůckou je pamatovat si, že nejspecifičtější jsou pravidla s #ID, poté s třídou a až nakonec samotné značky.
Plaváček
Profil
Bubák

Přiznám se, že občas mi tato věta nestačila a fakt jsem počítal :) Ale to přichází v úvahu až u opravdu velkých projektů.
Chamurappi
Profil
Reaguji na Plaváčka:
Ještě silnější než selektor podle ID je definice přímo v atributu style. V některých starších verzích Opery byla vtipná chyba, že selektor se dvěma ID převážil atribut, což ohromně „potěšilo“ hlavně javascriptaře.

c = počet jmen prvků v selektoru (pseudo-prvky se ignorují)
Podle návrhu CSS 2.1 už ne.

občas mi tato věta nestačila a fakt jsem počítal
Nejhorší jsou situace, které nutí do selektoru přidávat zcela samozřejmé předky, jako jsou třeba <body> nebo <html>, jen proto, aby se převážila síla jiného hodně specifického selektoru.
J
Profil *
AM
#test a:link, #test a:visited{
color:red;
}
#test a.barevny:link, #test a.barevny:visited{
color:green;
font-weight:bold;
}
a#zeleny:link, a#zeleny:visited{
color:green;
font-weight:bold;
}
- takhle je to zelené dost a všude, ne?

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0