여러 CSS 선택자 사용 시 발생하는 오류

초보자들이 자주 하는 실수를 다시 상기시켜 드립니다: 선택자 .bbb.zzz와 선택자 .bbb .zzz는 서로 다른 동작을 합니다. 첫 번째는 동시에 두 클래스를 가지고 있는 요소를 찾는 반면, 두 번째는 bbb 클래스 내부에 있는 zzz 클래스를 가진 요소를 찾습니다.

Задание 1

아래 코드에서 선택자가 무엇을 선택하는지 설명해 보세요. 그런 다음 해당 선택자에 맞는 HTML 코드를 작성하세요. 다음은 선택자가 포함된 코드입니다:

cssh2.zzz {
  color: red;
}
Задание 2

아래 코드에서 선택자가 무엇을 선택하는지 설명해 보세요. 그런 다음 해당 선택자에 맞는 HTML 코드를 작성하세요. 다음은 선택자가 포함된 코드입니다:

cssh2 .zzz {
  color: red;
}
Задание 3

아래 코드에서 선택자가 무엇을 선택하는지 설명해 보세요. 그런 다음 해당 선택자에 맞는 HTML 코드를 작성하세요. 다음은 선택자가 포함된 코드입니다:

css.bbb.zzz {
  color: red;
}
Задание 4

아래 코드에서 선택자가 무엇을 선택하는지 설명해 보세요. 그런 다음 해당 선택자에 맞는 HTML 코드를 작성하세요. 다음은 선택자가 포함된 코드입니다:

css.bbb .zzz {
  color: red;
}
Задание 5

아래 코드에서 선택자가 무엇을 선택하는지 설명해 보세요. 그런 다음 해당 선택자에 맞는 HTML 코드를 작성하세요. 다음은 선택자가 포함된 코드입니다:

css.bbb.zzz.xxx {
  color: red;
}
Задание 6

아래 코드에서 선택자가 무엇을 선택하는지 설명해 보세요. 그런 다음 해당 선택자에 맞는 HTML 코드를 작성하세요. 다음은 선택자가 포함된 코드입니다:

css.bbb .zzz.xxx {
  color: red;
}
Задание 7

아래 코드에서 선택자가 무엇을 선택하는지 설명해 보세요. 그런 다음 해당 선택자에 맞는 HTML 코드를 작성하세요. 다음은 선택자가 포함된 코드입니다:

css.bbb.zzz .xxx {
  color: red;
}
Задание 8

아래 코드에서 선택자가 무엇을 선택하는지 설명해 보세요. 그런 다음 해당 선택자에 맞는 HTML 코드를 작성하세요. 다음은 선택자가 포함된 코드입니다:

css.bbb .zzz .xxx {
  color: red;
}
Задание 9

아래 코드에서 선택자가 무엇을 선택하는지 설명해 보세요. 그런 다음 해당 선택자에 맞는 HTML 코드를 작성하세요. 다음은 선택자가 포함된 코드입니다:

css#elem.bbb {
  color: red;
}
Задание 10

아래 코드에서 선택자가 무엇을 선택하는지 설명해 보세요. 그런 다음 해당 선택자에 맞는 HTML 코드를 작성하세요. 다음은 선택자가 포함된 코드입니다:

css#elem .bbb {
  color: red;
}