CSS :nth-child(2)

Dla specjalistów Webmastering
#1

Witam chciałem sobie napisać zegar który odmierza czas i już stworzyłem wstępny projekt ale nie działa mi w arkuszu styli odwołanie się do nth-child(2) . kiedy wpisze w child(1). To działa ale wiadomo że wtedy tylko są ładowane style z tego bloku . Nie wiem co jest nie tak przeglądarkę faierfox mam nową wersję .Nie wiem dlaczego nie działa ten arkusz styli ?

https://pastebin.com/zuyieiU7
https://pastebin.com/p14PGQ3T

#2

Na pewno element jest drugim “dzieckiem”?

#3

Podesłałem kod

#4

Nie ma w kodzie html drugiego dziecka jako span na tym etapie.

Jedynie div okalający każdy span ma sąsiada / rodzeństwo, który można łapać po przez :nth-child(2).

#clock #time  div:nth-child(2) span#hour   {
    /* div - minuty */
}

Znaczniki span są “jedynakami” z innych “rodziców”.

Przechwytywanie
Przechwytywanie.JPG990×227 11.9 KB

Dodatkowo nie można 3 razy używać tego samego ID, od tego są klasy w CSS lub atrybuty do użytku własnego np.:

na Allegro takie są by utrudnić blokowanie reklam ale nie zrobić tego za trudnym - data-role / data-box-name.

Zakładając, że nie włącza się tryb Quirks (https://pl.wikipedia.org/wiki/Quirks_mode), to pewnie w układzie znaczników problem.

A żeby się nie włączał wystarczy użyć deklaracji DTD:

http://www.kurshtml.edu.pl/html/deklaracja_typu_dokumentu,html.html

np. HTML5:

<!DOCTYPE html>
#5

Ale co nie zrobić za trudnym nie rozumiem?

#6

To było wtrącenie, że Allegro podpisuje element a używa skompresowanych klas/ID (niezrozumiałych dla człowieka):

<div data-box-name="smart_free_month_banner" data-box-id="h4GzErVDTJybCQTEmPd4NA==i8rrD1khTPqxlUX0FRGFSw==">
   <a name="smart_free_month_banner"></a>
</div>
  • id h4GzErVDTJybCQTEmPd4NA==i8rrD1khTPqxlUX0FRGFSw== - “losowe”
  • atrybut data-box-name="smart_free_month_banner" - raczej stały i zrozumiały dla człowieka.

Jak chcesz mieć białe tło pod liczbami, to twój zapis nie przejdzie:

#clock #time div span:nth-child(2)

bo wymagał by mniej więcej takiego układu tagów “span” (jeden pod drugim bez diva w tym samym wierszu):

    <div id="time">
        <div>
            <span id="hour">00</span> Hours
            <span id="hour">00</span> Minutes
	    <span id="hour">00</span> secunts
        </div>
    </div>

Wtedy w kodzie istnieje span:nth-child(2), w poprzednim układzie takiego nie było.
Nie testowałem czy to rozwala podpis po cyframi - pewnie nie przeskoczy do nowej linii “równo” w rządkach.