Wpisz - CSS-Tricks

Anonim

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-heightjest 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