К содержанию

Erro ao usar vários seletores CSS

Lembrando um erro comum de iniciantes: o seletor .bbb.zzz e o seletor .bbb .zzz fazem coisas diferentes. O primeiro procura por um elemento que tenha ambas as classes simultaneamente, enquanto o segundo - procura por um elemento com a classe zzz, que está dentro de um elemento com a classe bbb.

Задание 1

Explique o que o seletor no código abaixo seleciona. Em seguida, escreva o código HTML que se adequa a esse seletor. Aqui está o código com o seletor:

cssh2.zzz {
  color: red;
}

Задание 2

Explique o que o seletor no código abaixo seleciona. Em seguida, escreva o código HTML que se adequa a esse seletor. Aqui está o código com o seletor:

cssh2 .zzz {
  color: red;
}

Задание 3

Explique o que o seletor no código abaixo seleciona. Em seguida, escreva o código HTML que se adequa a esse seletor. Aqui está o código com o seletor:

css.bbb.zzz {
  color: red;
}

Задание 4

Explique o que o seletor no código abaixo seleciona. Em seguida, escreva o código HTML que se adequa a esse seletor. Aqui está o código com o seletor:

css.bbb .zzz {
  color: red;
}

Задание 5

Explique o que o seletor no código abaixo seleciona. Em seguida, escreva o código HTML que se adequa a esse seletor. Aqui está o código com o seletor:

css.bbb.zzz.xxx {
  color: red;
}

Задание 6

Explique o que o seletor no código abaixo seleciona. Em seguida, escreva o código HTML que se adequa a esse seletor. Aqui está o código com o seletor:

css.bbb .zzz.xxx {
  color: red;
}

Задание 7

Explique o que o seletor no código abaixo seleciona. Em seguida, escreva o código HTML que se adequa a esse seletor. Aqui está o código com o seletor:

css.bbb.zzz .xxx {
  color: red;
}

Задание 8

Explique o que o seletor no código abaixo seleciona. Em seguida, escreva o código HTML que se adequa a esse seletor. Aqui está o código com o seletor:

css.bbb .zzz .xxx {
  color: red;
}

Задание 9

Explique o que o seletor no código abaixo seleciona. Em seguida, escreva o código HTML que se adequa a esse seletor. Aqui está o código com o seletor:

css#elem.bbb {
  color: red;
}

Задание 10

Explique o que o seletor no código abaixo seleciona. Em seguida, escreva o código HTML que se adequa a esse seletor. Aqui está o código com o seletor:

css#elem .bbb {
  color: red;
}