O seletor CSS é a base para o layout de nossa página CSS. O que exatamente são seletores CSS e como usá-los de maneira razoável? Os seletores podem ser divididos em três categorias, exceto a primeira categoria do seletor HTML, podemos nomear as outras duas categorias por nós mesmos, preste atenção à inclusão da semântica ou adicione os comentários necessários para tornar nosso código mais claro e fácil de ler. .
Seletor de tags HTML
O seletor HTML é uma tag HTML, como: DIV, TD, P, H1, etc. Se você defini-los com CSS, as propriedades desta tag na página controlada pelo artigo CSS serão exibidas de acordo com sua definição.
Por exemplo, se quisermos que a cor de H1 seja vermelha, então: H1 {color: red}. Aqui aprendemos um recurso do CSS, que pode definir vários seletores em uma regra. Tais como: H1, H2, TD {cor: vermelho}. Esta definição permite que todos os H1, H2 e TD sejam vermelhos. Em uso específico, vários atributos com as mesmas configurações podem ser combinados e escritos para reduzir nosso código.
Seletor de classe Seletor de classe
Existem dois tipos de seletor de classe, um é chamado seletor de classe relacionado, que está relacionado a uma tag HTML. Sua sintaxe é tag.Classname {property:value}. Por exemplo: queremos definir a cor de alguns, mas não de todos, H1 como vermelho H1.redone {color: red}: o primeiro H1 é vermelho, mas o segundo não é.
O segundo tipo é um seletor de classe independente. Pode ser usado por qualquer tag HTML. Sua sintaxe é a seguinte. Classname {property: value} Se tivermos a seguinte definição blueone {color: blue} então podemos aplicá-la a diferentes tags. É muito óbvio que o seletor de classe nos dá mais liberdade e espaço para jogar.
Seletor de ID Seletor de ID
Na verdade, a função do seletor de ID é muito semelhante à do seletor de classe independente. A diferença é que sua sintaxe e uso são diferentes e são úteis para o javascript manipular elementos HTML. Em nosso layout, costumamos usar seletores de ID para definir diferentes áreas estruturais.
Sua sintaxe é a seguinte #IDname {property:value}. Suponha que temos a seguinte definição #yelowone {cor: amarelo}. Podemos aplicar esta definição a qualquer tag com o mesmo nome de ID, como: texto aqui. Você pode pensar que, como o seletor de ID tem a mesma função que o seletor de classe independente, por que ambos existem? Elementos HTML com IDs podem ser manipulados por JavaScript.