CSS ważność selektorów - konflikt?

Hej Wam

tworzę stronę i zauważyłem pewną rzecz i nie bardzo umiem sobie z tym poradzić/zrozumieć; a mianowicie mam selektory: a ul i li, które są opisane dla głównych artykułów na stronie. Stworzyłem sobie submenu z podobnymi selektorami tylko w arkuszu stylów dodaję .submenu a, .submenu ul i .submenu li i opisując je muszę niejako "walczyć" z tymi głównymi, np.

li { height: 20px; }
.submenu li { heigth: 16px; }

i żeby w submenu mieć odpowiednią wysokość , który zawiera link musiałem wpisać 16 px (co jest bzdurą) i teraz nie wiem ile faktycznie wynosi wysokość czy 20 px, 16 px a może suma ich? Czy istnieje możliwość aby w klasie .submenu li właściwości z głównego li nie były pobierane? To dzieje się praktycznie dla każdej właściwości, z marginesami, z padding, itd.

Dzięki.

Każda przeglądarka ma chyba wbudowane narzędzia deweloperskie - tam masz jasno napisane skąd jakaś wartość się wzięła.

No a generalnie poczytaj o podstawach css i on ważności selektorów.

A konkretne problemy wrzucaj na jakieś jsbin.com - żeby było widać o co Ci chodzi - przypadki są często mocno specyficzne, szczególnie w przypadku css.

bierze 20px

bierze 16px

To jest jest proste, ważne i bardzo dobre.

Dzięki wielkie, za odpowiedzi. Jeśli chodzi o ważność selektorów to czytałem co nieco, jak i o samym CSS-sie. Przyznam się też, że jakoś nigdy nie zagłębiałem się za bardzo w CSS-y. Chyba znalazłem błąd, proszę potwierdźcie mi: jeśli w głównym "li" określam padding a w .submenu "li" tego nie zrobię to i tak selektor z .submenu pobierze wartość z tego głównego?

szymon7500 napisał(a):

Dzięki wielkie, za odpowiedzi. Jeśli chodzi o ważność selektorów to czytałem co nieco, jak i o samym CSS-sie. Przyznam się też, że jakoś nigdy nie zagłębiałem się za bardzo w CSS-y. Chyba znalazłem błąd, proszę potwierdźcie mi: jeśli w głównym "li" określam padding a w .submenu "li" tego nie zrobię to i tak selektor z .submenu pobierze wartość z tego głównego?

Tak. To nie jest główny li dając coś takiego li{} określasz styl dla wszystkich li na całej stronie

także powinieneś wiedzieć o czymś takim jak specyficzność. To taka wartość, którą liczy przeglądarka w stosunku do selektora, a od tej wartości zależy, która reguła będzie bardziej ważna jak masz dwie reguły, które coś deklarują (wygrywa reguła z bardziej specyficznym selektorem)

http://cssspecificity.com/
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/ (swoją drogą to artykuł z 2007, co prawda wydaje mi się, że to się aż tak bardzo nie zmieniło, lecz cholera wie).

edit:
chociaż widzę, że dobre praktyki przynajmniej się trochę zmieniły:
You should always try to use IDs to increase the specificity. -- to dzisiaj brzmi już jak antypattern, ponieważ umieszczanie id w css (ogólnie) powinno być raczej wyjątkiem a nie regułą - taki kod ciężko się utrzymuje potem i jest mało elastyczny.