Detalhamento do Seletor de Classe CSS

O seletor de classe permite especificar estilos de maneira independente dos elementos do documento.

Seletor de Classe CSS

O seletor de classe permite especificar estilos de maneira independente dos elementos do documento.

Este seletor pode ser usado sozinho ou combinado com outros elementos.

Dica:Apenas após marcar adequadamente o documento, você pode usar esses seletores, então usar esses dois seletores geralmente requer algumas构想 e planejamento.

A maneira mais comum de aplicar estilos sem considerar o elemento de design específico é usar o seletor de classe.

Modificar o código HTML

Antes de usar o seletor de classe, é necessário modificar a marcação do documento específico para que o seletor de classe funcione corretamente.

Para associar o estilo do seletor de classe ao elemento, é necessário especificar uma classe apropriada. Veja o código HTML abaixo:

<h1 class="important">
Este título é muito importante.
</h1>
<p class="important">
Este parágrafo é muito importante.
</p>

No código acima, os classes dos dois elementos são especificadas como important: o primeiro título (elemento h1), o segundo parágrafo (elemento p).

Sintaxe

Então usamos a seguinte sintaxe para aplicar estilos a esses elementos categorizados, ou seja, um ponto (.) antes do nome da classe, seguido do seletor de coringa:

*.important {color:red;}

Se você quiser escolher todos os elementos com o mesmo nome de classe, você pode ignorar o seletor de coringa na escolha de classe, o que não terá nenhum efeito negativo:

.important {color:red;}

Experimente Pessoalmente

Uso em conjunto com seletores de elemento

Os seletores de classe podem ser usados em conjunto com os seletores de elemento.

Por exemplo, você pode desejar que apenas os parágrafos sejam exibidos em texto vermelho:

p.important {color:red;}

O seletor agora coincidirá com todos os elementos p que tenham a propriedade class contendo 'important', mas não coincidirá com outros tipos de elementos, independentemente de terem essa propriedade class. O seletor p.important pode ser interpretado como: 'todos os elementos p cujo valor da propriedade class seja 'important''. Porque o elemento h1 não é um parágrafo, o seletor dessa regra não coincide com ele, então o elemento h1 não se tornará texto vermelho.

Se você realmente deseja especificar estilos diferentes para o elemento h1, você pode usar o seletor h1.important:

p.important {color:red;}
h1.important {color:blue;}

Experimente Pessoalmente

Seletor de multipla classe CSS

No capítulo anterior, tratamos do caso em que o valor da classe contém uma palavra. Em HTML, um valor de classe pode conter uma lista de palavras, separadas por espaços. Por exemplo, se você deseja marcar um elemento específico como importante (important) e aviso (warning), pode ser escrito da seguinte forma:

<p class="important warning">
Este parágrafo é uma advertência muito importante.
</p>

A ordem dessas palavras não importa, pode ser escrita como 'warning important' também.

Nós supomos que todos os elementos com a classe 'important' sejam em negrito, e todos os elementos com a classe 'warning' sejam em itálico, e todos os elementos que contenham ambas as classes 'important' e 'warning' terão uma cor de fundo prateada. Isso pode ser escrito da seguinte forma:

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

Experimente Pessoalmente

Ao conectar dois seletores de classe juntos, é possível escolher apenasContém essas classes ao mesmo tempodo elemento (a ordem dos nomes de classe não importa).

Se um seletor de múltiplas classes contiver um nome de classe que não está na lista de nomes de classe, a correspondência falhará. Veja as regras a seguir:

.important.urgent {background:silver;}

Como esperado, este seletor coincide apenas com elementos p que contêm a palavra 'important' e 'urgent' no atributo class. Portanto, se um elemento p tiver apenas as palavras 'important' e 'warning' no atributo class, não coincidirá. No entanto, ele pode coincidir com os seguintes elementos:

<p class="important urgent warning">
Este parágrafo é uma advertência muito importante e urgente.
</p>

Experimente Pessoalmente

Ponto Importante:Antes da versão IE7, os Internet Explorer de diferentes plataformas não puderam lidar corretamente com seletores de múltiplas classes.