Selektor uniwersalny

* {
  margin: 0;
}

Selektor ten dotyczy każdego elementu stworzonego przez nas pomiędzy znacznikami html, tak?
Co z regułami i elementami określonymi przez przeglądarki? do nich też będzie dopisywał margin:0 ?

Toficjusz napisał(a):

* {
  margin: 0;
}

Co z regułami i elementami określonymi przez przeglądarki? do nich też będzie dopisywał margin:0 ?

Używa się go właśnie po to, żeby nadpisywać te domyślne reguły.

Mam np. na swojej stronie 3 elementy - html, body i p.

* { margin: 0; padding: 0; }

html, body, p (margin: 0; padding: 0; }

Czy obie te reguły są takie same? Czym się różnią? co lepiej stosować np. w resecie?

Obie reguły mają takie samo działanie odnośnie elementów: html, body, p.
Ale selektor * zresetuje wartości również dla wszystkich innych elementów strony.

* { margin: 0; padding: 0; }

Oznacza: Przypisz do każdego elementu w HTML odstęp zew. i wew. na zero

html, body, p (margin: 0; padding: 0; }

Oznacza: To samo co wyżej tylko dla elementów: html, body oraz p

Różnica jest taka, że część deklaracji CSS (np. font-family) jest dziedziczona przez dzieci dlatego czasami nie widać różnicy między jednam, a drugim rozwiązaniem.

Czyli optymalnie byłoby zrobić dla elementów dziedziczonych zapis "html, body, p", a dla niedziedziczonych selektor uniwersalny?

Toficjusz napisał(a):

Czyli optymalnie byłoby zrobić dla elementów dziedziczonych zapis "html, body, p", a dla niedziedziczonych selektor uniwersalny?

Zależy od efektu, jaki chcesz uzyskać. Może wystarczyć coś w stylu:

BODY {
  color:green;
}

Ale już np A nie będzie się tego słuchać, więc jeśli nie wiesz dobrze, co jest kiedy dziedziczone, a kiedy nie i/lub chcesz ostylować naprawdę wszystkie elementy, użyj:

* {
  color:green;
}

@Freja Draco dobrze prawi!

Dodam jeszcze, że zazwyczaj selektora uniwersalnego (*) używamy dla ustawienia początkowych wartości dla wszystkich znaczników (np. w tzw. reset CSS) tj.

/* najprostrza wersja reset CSS*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

Pozostałe wartości już w konkretnych znacznikach np.

html {
font-size: 10px;
font-family: Verdana, sans-serif
}

p {
font-size: 1.6rem;
}