[css] Problem z przypisaniem stylu dla elementów z konkretnym ID poprzez #

pytanie zadane 21 marca 2017 w HTML i CSS przez kevin Mądrala (5,010 p.)

Witam!

Nie rozumiem dlaczego przy ustawieniu stylu #nav-bar input[type=button] potrafi mi się rozłożyć cała logika paska nawigacyjnego: tutaj jest błędny kod https://jsfiddle.net/adriansikora344/9skbox40/ a tutaj poprawny https://jsfiddle.net/adriansikora344/uvk9bqu0/ różnica jest taka że w błędnym kodzie jest #nav-bar input[type=button], .dropbtn a poprawnym bez #nav-bar i tak w kilku miejscach. Tylko dlaczego tak się dzieje ? Bez #nav-bar styl dla input zmieni mi styl na całej stronie, mogę to załatwić poprzez .dlaInput ale w każdym inpucie będę musiał dopisywać class="dlaInput". Przez to w błędnym kodzie nie mam podświetlenia przycisku rozwijającego menu, jest inne tło rozwijanego menu.

Pozdrawiam.

komentarz 21 marca 2017 przez ScriptyChris Mędrzec (190,190 p.)

Poczytaj o specificity. Następnie sprawdź sobie specyficzność selektorów, które wg Ciebie nie działają np. takim kalkulatorem. Wtedy będziesz wiedział, które style nadpisują poprzednie, a w których musisz zastosować bardziej specyficzny selektor.

komentarz 22 marca 2017 przez kevin Mądrala (5,010 p.)

Czyli ujmując pozostaje mi zrobić pasek nawigacyjny poprzez .nav-bar ? Tylko skoro # jest dla elementu o konkretnym ID który występuje tylko raz to zastosowanie .nav-bar nie przeczy jakimś regułom skoro stosuje to dla elementu który jest tylko jeden ?