Tipo - CSS-Tricks

Anonim

Um Seletor de tipo (às vezes chamado de Seletor de tipo de elemento) combina elementos com o nome do nó do elemento correspondente, como

, e tags. Os seletores de tipo geralmente são usados ​​para fazer alterações de "traço amplo" no estilo de um site.

p ( /* "p" is the type selector */ margin: 0 0 1em 0; )

Uso comum

Freqüentemente, os Seletores de tipo são definidos como padrões, como em uma redefinição de CSS em que a intenção é substituir os padrões do navegador. Um exemplo da primeira linha de normalize.css, uma redefinição CSS popular:

article, aside, details, figcaption, figure, footer, header, main, nav, section, summary ( display: block; )

Os Seletores de tipo acima estão definindo a propriedade de exibição dessas tags para bloquear, de modo que sempre que qualquer uma dessas tags for usada em todo o site, elas serão exibidas como bloco, a menos que sejam substituídas por um estilo mais específico.

Melhores Práticas

Geralmente, é considerado uma prática ruim aplicar alterações de detalhes finos apenas com um Seletor de tipo. Por exemplo, aplicar uma propriedade “color: white” de maneira geral a todas as tags raramente seria algo útil em qualquer site. Isso ocorre porque as tags são genéricas e são usadas em todos os sites para vários fins.

No entanto, com um Seletor de tipo como body ( ), definir um padrão font-size e line-heighté comum. Isso se deve em parte ao fato de que só pode haver uma tag em uma determinada página, portanto, há menos oportunidades de conflitos.

Especificação e desempenho do seletor de tipo

Os Seletores de tipo estão no nível mais baixo da cascata de especificidade (geralmente escrito como 0, 0, 0, 1), o que significa que quase tudo substituirá o estilo aplicado por meio de um Seletor de tipo sozinho e adicionando um Seletor de tipo a uma classe ou ID em seu CSS fornece especificidade extra mínima.

Os seletores de tipo também têm uma classificação inferior na escala de eficiência de CSS do que as classes e IDs. Portanto, é tecnicamente melhor escolha de desempenho utilizar uma classe ou um ID em vez do Seletor de tipo mais genérico (embora a diferença de velocidade real seja normalmente insignificante).

Suporte para navegador

cromada Safári Raposa de fogo Ópera IE Android iOS
Nenhum Nenhum Nenhum Nenhum Nenhum Nenhum Nenhum