css - użyj uniwersalnego selektora „*” vs. html lub selektora treści?

Zastosowanie stylów do tagu body zostanie zastosowane do całej strony, więc

body { font-family: Verdana }

zostaną zastosowane do całej strony. Można to również zrobić za pomocą

* {font-family: Verdana} 

które dotyczyłyby wszystkich elementów, a więc miałyby taki sam efekt.

Rozumiem zasadę, że w pierwszym przypadku styl jest stosowany do jednego znacznika, treści dla całej strony, podczas gdy w drugim przykładzie czcionka jest nakładana na poszczególne elementy HTML. Pytam, jaka jest praktyczna różnica w tym, jakie są implikacje i jaki jest powód, sytuacja lub najlepsza praktyka, która prowadzi do wzajemnego wykorzystywania.

Jednym z efektów ubocznych jest z pewnością prędkość (+1 Rob). Najbardziej interesuje mnie faktyczny powód, aby wybierać między sobą pod względem funkcjonalności.

Różnice funkcjonalne między tymi dwiema opcjami selektora CSS ... (moje zdanie)

ciało

• Stosuje właściwości stylu do elementu body.
• Elementy w ciele mogą dziedziczyć wartości właściwości. Niektóre właściwości domyślnie „dziedziczą”.
• Deklaracje stylu pasujące do elementu w treści mogą zastąpić odziedziczony styl.

Selektor uniwersalny * (wszystkie elementy)

• Stosuje właściwości stylu do wszystkich poszczególnych elementów.
• Zastępuje odziedziczone właściwości stylu i domyślne „wartości początkowe”. Blokuje dziedziczenie.
• Inne, bardziej szczegółowe selektory css pasujące do elementu zastąpią właściwości stylu zastosowane przez *.

Propozycje

1. Użyj treści dla właściwości stylu, które domyślnie dziedziczą, takich jak czcionka, kolor, w celu zapewnienia rozsądnej wartości domyślnej dla elementów, zmniejszając potrzebę jawnego kodowania dla każdego przypadku i zachowując zdolność elementów zawartych na niższych poziomach poniżej treści do odziedziczą po rodzicach.
2. Prawdopodobnie lepiej w tym przypadku nie używać Selektora uniwersalnego *. Przerywa dziedziczenie między innymi elementami w ciele i może zmusić cię do napisania większej liczby reguł css w celu kompensacji. Może to mieć wpływ na spowolnienie renderowania stron. Zależy to od rozmiaru i zawartości strony oraz liczby reguł css.

Spróbuj czegoś takiego

body { font-family: Verdana }
table { font-family: Arial }

przeciwko

* { font-family: Verdana }
table { font-family: Arial }

I zobacz, które style są stosowane do komórek tabeli.

W przypadku kaskadowych arkuszy stylów istnieje różnica między „zastosowanym do całego dokumentu” a „zastosowanym do każdego elementu dokumentu” .

Zastosowanie stylu kaskadowego do treści powoduje zastosowanie jej do wszystkich znaczników w treści, dopóki znacznik nie zostanie nadpisany. Następnie nadpisany styl jest stosowany do wszystkich znaczników w tym jednym.

Jednak istnieją pewne style, które nie są kaskadowane, takie jak margines i wypełnienie (zwykle tam, gdzie nie ma to sensu). Można je zastosować tylko do określonych znaczników i tam może być użyta symbol wieloznaczny (choć rzadko).

Większość nie kaskadowych stylów ma również wartość dziedziczenia (np. margin: inherit), Co oznacza „weź wartości znacznika nadrzędnego”.

Zapomniałem wszystkich szczegółów, ale za pomocą selektora * wydajność jest spowalniana, ponieważ każdy element jest oceniany, gdy przeglądarka analizuje CSS i stosuje styl. iirc, ustawienie czcionki w tym przypadku tylko na element nadrzędny tworzy jedno odniesienie dla każdego elementu i dodatkowa praca nie jest potrzebna.

Są też inne problemy, ale znowu nie pamiętam ich wszystkich i nie używałem * od lat.

Ogólna wytyczna dobrego projektowania CSS ma być jak najbardziej szczegółowa, ale nie bardziej szczegółowa.

Tak więc w twoim przykładzie zastosowanie stylu do elementu body byłoby możliwie jak najbardziej szczegółowe i na pewno bardziej szczegółowe niż selektor „*”.

Jak wspominają inni, body { font-family: Verdana }wybierze czcionkę Verdena tylko do tych elementów, które dziedziczą z font-stylenieruchomości od swoich rodziców tak, że wszystkie jego rodziców zbyt dziedziczy nieruchomość eventualy stanowią bodyelementu, a * {font-family: Verdana}wybierze czcionkę Verdena do wszystkich elementów. Chciałbym zilustrować różnicę na przykładzie:

Za pomocą selektora ciała:

body 
{ 
font-family: courier;
}

<p> This is paragraph with courier font </p>
<form>
<label for="X">Please type inside me: </label><input type="text" naem="X" value="Not Courier :("> 
</form>

Za pomocą uniwersalnego selektora *:

* 
{ 
font-family: courier;
}

<p> This is paragraph with courier font </p>
<form>
<label for="X">Please type inside me: </label><input type="text" naem="X" value="Courier :)"> 
</form>

Użyj kodów css i html w przykładach, które rozpoznasz, że <input>element w ogóle nie dziedziczy stylu czcionki, a zatem cokolwiek wpiszesz w formularzu, otrzyma domyślny styl czcionki arkusza stylów klienta użytkownika. W drugim przykładzie uniwersalny selektor *wyraźnie ustawia styl czcionki dla każdego elementu, w tym inputelementu.