Autor | Zpráva | ||
---|---|---|---|
Jiří Ráb Profil |
#1 · Zasláno: 27. 5. 2019, 11:57:00
Ahoj chci se vás zeptat jaký je rozdíl mezi pokud napíšu div p {background:red;} a div >p {background:red;} ?
|
||
Keeehi Profil |
#2 · Zasláno: 27. 5. 2019, 12:07:11
V prvním případě může být p jakkoli hluboko v divu. V druhém případě musí být přímým potomkem.
|
||
Jiří Ráb Profil |
to znamená co tím přímým potomkem
že v divu není další div a vněm až p tahle <div class="cover"><div><p></p></div></div> tak tady nefunguje .cover >p { background:red;} ale funguje .cover p |
||
T-fon Profil |
#4 · Zasláno: 27. 5. 2019, 12:23:52
Přímým potomkem .cover je další <div>, takže by ti fungovalo třeba .cover >div { background:red;}.
|
||
Tomášeek Profil |
Jiří Ráb:
„ale funguje .cover p“ Funguje .cover p (jakkoliv hluboko zanořené P ), ale už ne .cover > p . Fungovalo by .cover > div > p , případně div > p (kde div není .cover , ale až ten vnořený).
Ono teda funguje všechno, slovo "nefunguje" je tady velmi hloupé. Dobré užití selektoru přímého potomka je třeba v menu, kde chceš ostylovat jinak jednotlivé úrovně menu bez nutnosti naplácat tam milion tříd. menu li a {} /* vsechny odkazy ve vsech urovnich */ menu > li a {} /* vsechny odkazy ve vsech urovnich ... totožné s řádkem výše */ menu > li > a {} /* jen 1. uroven */ menu > li > ul > li > a {} /* jen 2. uroven */ menu li li li a {} /* 3. a dalsi, u 3urovnoveho menu jen 3. uroven */ |
||
Jiří Ráb Profil |
#6 · Zasláno: 27. 5. 2019, 13:14:04
díky
|
||
Mlocik97 Profil |
#7 · Zasláno: 27. 5. 2019, 13:17:23
Tomášeek:
1 a 2 neni totožné.... > určuje že menu musí byť bezprostredne rodičom li, zatiaľ čo v prvom môže byť aj o 3 úrovne vyššie.
|
||
Tomášeek Profil |
Mlocik97:
„určuje že menu musí byť bezprostredne rodičom li, zatiaľ čo v prvom môže byť aj o 3 úrovne vyššie.“ To je hezká poučka z teorie. Zkus se zamyslet znovu nad tím kódem, který jsem poslal a uveď mi prosím kousek HTML kódu, kde ty první dvě deklarace nebudou totožné. Jen upřesním, že původně v kódu bylo #menu a chtěl jsem dopsat dodatek, že kód počítá s tím, že máme <ul id=menu> . Pak jsem to nahradil za menu , aby to bylo jednoznačné a doplnění jsem psát nemusel.
Prozradím, že jde trochu o špek, ale při normálním HTML zápisu, ke kterému tento stylopis patří, jde skutečně o totožné zápisy. Hm, tak nakonec jsem ti spíchnul ukázku i s HTML kódem, můžeš nad ní přemýšlet. To, že první dva řádky jsou totožné a zaměří všechny odkazy v celém menu, je demonstrováno tím, že všechny odkazy jsou bez podtržení (1. řádek) a mají červený border (2. řádek). Živá ukázka |
||
Mlocik97 Profil |
Tomášeek:
nebudú totožné napríklad v prípade: <menu> <div> <li> <a>text</a> </li> </div> </menu> Živá ukázka |
||
Tomášeek Profil |
#10 · Zasláno: 27. 5. 2019, 22:58:13
Mlocik97:
Proto jsem psal „při normálním HTML zápisu“, tedy zápisu, který je běžný. Ten div je tam zbytečný. Dobře, vrátím tam původní zamýšlený markup, Živá ukázka. V UL/OL smí být pouze LI a nic jiného tam nemá co dělat. To byl původní markup (nepředpokládal jsem, že se najde jantar, který bude vymýšlet markupy, které se běžně nepoužívají), kde jsou ty zápisy totožné. A totožné jsou i s menu , pokud se s ním pracuje tak, jak má.
|
||
Bubák Profil |
#11 · Zasláno: 27. 5. 2019, 23:30:04
Tomášeek:
Ještě tak někdy se vyskytne tohle nebo tohle, dávám pro úplnost: <menu> <li> <span> <a href="#"> </a> </span> </li> </menu> <menu> <li> <a href="#"> <span> </span> </a> </li> </menu> |
||
Tomášeek Profil |
Bubák:
Jasně, že jo. Jenže i ty spany jsou (v 99% případech) zbytečné. I ve tvém případě jsou ale tyto zápisy totožné menu li a {} menu > li a {} Ten hlavní point byl v tom, že první znamená: „Všechny odkazy v jakémkoliv LI v menu“. Druhý znamená: „Všechny odkazy v LI, která jsou přímými potomky menu“. Ač ty přepisy jsou zdánlivě každý jiný, ve skutečnosti se jedná o všechny odkazy. Protože i odkaz ve 3. úrovni je potomkem LI v první úrovni. No, téma je asi vyčerpáno. To, co jsem psal, platí, pokud s těmi styly koresponduje HTML (bystří pochopili, nebo pochopí teď :-)). Pokud budu vymýšlet nesmyslná HTML, nikdy univerzálním stylopisem nemůžu trefit elementy z HTML (resp. vždy jde napsat HTML tak, aby prvně napsaný CSS na něj neseděl). |
||
Taurus Profil |
#13 · Zasláno: 28. 5. 2019, 10:34:11
Tomášeek:
Na tomhle fóru se mi vždycky líbil perfekcionismus a smysl pro detail, kdy si navzájem upřesňujeme vágní formulace. Když jsem četl tvůj kód menu li a {} /* vsechny odkazy ve vsech urovnich */ menu > li a {} /* vsechny odkazy ve vsech urovnich ... totožné s řádkem výše */ tak první co mě napadlo bylo, že to prostě není správné tvrzení. Nezávisle na tom, kolik příspěvků a dodatků za to ještě dodáš. Nezávisle na tom, jak tady budeš házet jantary nebo bystrými. I přesto, že souhlasím, že taky čekám klasickou strukturu ul class="menu", takže pak následuje li. Ale stejně tak mě napadl případ div class="menu", pak cokoli a pak teprv ul, li. Ale jako jantar si nepřipadám. Je to jednoduše protipříklad, navíc na něm není tak kuriozního. Zvěrstva jsou úplně něco jiného... |
||
Keeehi Profil |
Taurus:
Před menu není tečka, takže se nejedná o třídu ale tag. Dle <menu> - HTML: Hypertext Markup Language | MDN mohou být potomky tagu menu jen li, script, template, menu, menuitem, hr. Tag div v tom výčtu ovšem není. Kdyby se jednalo o třídu, tak máš pak samozřejmě pravdu. |
||
Taurus Profil |
#15 · Zasláno: 28. 5. 2019, 11:42:21
Supr, tak tímto se Tomášeek omlouvám, už si jako jantar připadám. :-)
Upřímně, bylo to způsobené tím, že se to nakupilo. Nelíbí se mi dlouhodobě tón některých zdejších diskutérů, proto jsem tu přestal odpovídat. Bude lepší, když v tom budu pokračovat. |
||
Časová prodleva: 6 let
|
0