Lista typów (czasami nazywana Selektor typów elementów) dopasowuje elementy z odpowiednią nazwą węzła elementu, taką jak
,
i
tagi. Selektory typów są zwykle używane do wprowadzania „szerokich zmian” w stylu witryny.
p ( /* "p" is the type selector */ margin: 0 0 1em 0; )
Typowe użycie
Często selektory typów są ustawiane jako domyślne, na przykład podczas resetowania CSS, w którym intencją jest zastąpienie domyślnych ustawień przeglądarki. Przykład z pierwszej linii normalize.css, popularnego resetu CSS:
article, aside, details, figcaption, figure, footer, header, main, nav, section, summary ( display: block; )
Powyższe selektory typów ustawiają właściwość wyświetlania tych tagów na blokowanie, dzięki czemu za każdym razem, gdy którykolwiek z tych tagów jest używany w całej witrynie, będą one wyświetlane jako blok, chyba że zostaną zastąpione przez bardziej określony styl.
Najlepsze praktyki
Ogólnie uważa się, że wprowadzanie drobnych zmian szczegółów za pomocą samego Selektora typów jest złą praktyką. Na przykład ogólne zastosowanie właściwości „kolor: biały” do wszystkich
tagów rzadko byłoby przydatne w jakiejkolwiek witrynie. Dzieje się tak, ponieważ
tagi są ogólne i są używane w różnych witrynach do różnych celów.
Jednak w przypadku Listy typów, takiej jak body ( )
ustawienie wartości domyślnej font-size
i line-height
jest wspólne. Wynika to częściowo z faktu, że na jednej stronie może znajdować się tylko jeden tag, więc istnieje mniej okazji do konfliktów.
Specyfika i wydajność selektora typów
Selektory typów znajdują się na najniższym poziomie kaskady specyficzności (zwykle zapisywane jako 0, 0, 0, 1), co oznacza, że prawie wszystko zastąpi styl zastosowany za pomocą samego Selektora typów i doda Selektor typów do klasy lub identyfikatora w Twój CSS zapewnia minimalną dodatkową specyficzność.
Selektory typów również plasują się niżej w skali wydajności CSS niż klasy i identyfikatory. Dlatego z technicznego punktu widzenia lepszym wyborem wydajności jest użycie klasy lub identyfikatora zamiast bardziej ogólnego selektora typu (chociaż rzeczywista różnica prędkości jest zwykle pomijalna).
Wsparcie przeglądarki
Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
---|---|---|---|---|---|---|
Każdy | Każdy | Każdy | Każdy | Każdy | Każdy | Każdy |