curso optativoclass Recomendação de curso:

CSS .

selector .class para selecionar todos os elementos de um tipo específico com uma class específica, escreva um ponto ( class definição e uso

CSS.) caracteres, seguidos por class elementos com um valor específico de atributo.

elemento.class para selecionar todos os elementos de um tipo específico com uma class específica, escreva um ponto ( class selectores são usados para selecionar elementos com um valor específico de atributo.

para selecionar apenas elementos com um valor específico de atributo. class escreva o nome do elemento, seguido de um ponto (.) caracteres, seguidos por class valores de atributo (veja o exemplo a seguir 2)。

Dica:Os elementos HTML também podem referenciar múltiplos class(Veja o exemplo a seguir 3)。

Exemplo

Exemplo 1

Selecione e defina o estilo de todos os elementos com class="introdução":

.introdução {
  background-color: amarelo;
}

Experimente você mesmo

Exemplo 2

Selecione e defina o estilo de todos os elementos <p> com class="introdução":

p.introdução {
  background-color: amarelo;
}

Experimente você mesmo

Exemplo 3

.class Uso diferente dos selectores:

/* Selecione todos os elementos com class="center" */
.center {
  alinhamento do texto: centro;
}
/* Selecione todos os elementos <p> com class="grande" */
p.grande {
  font-size: 200%;
}
/* Selecione todos os elementos <p> cuja lista de class inclua "fancy" e "bege" */
p.fancy.bege {
  font-family: 'Courier New', monoespaco;
  background-color: bege;
  border: 2px sólido verde;
}
/* Selecione todos os elementos <p> com class="ex1" dentro de todos os elementos <p> com class="ex2" */
p.ex1 .ex2 {
  background-color: amarelo;
}

Experimente você mesmo

Sintaxe CSS

.class {
  declarações css;
}

Sintaxe CSS

elemento.class {
  declarações css;
}

技术细节

版本: CSS1

浏览器支持

Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持

Páginas relacionadas

Tutorial CSS:Seletor de classe do CSS

Tutorial CSS:Explicação detalhada do seletor de classe do CSS