К содержанию

Fehler bei der Verwendung mehrerer CSS-Selektoren

Ich erinnere an einen typischen Anfängerfehler: Der Selektor .bbb.zzz und der Selektor .bbb .zzz machen unterschiedliche Dinge. Der erste sucht nach einem Element, das gleichzeitig beide Klassen hat, und der zweite - sucht nach einem Element mit der Klasse zzz, das sich innerhalb eines Elements mit der Klasse bbb befindet.

Задание 1

Erklären Sie, was der Selektor im unten angegebenen Code auswählt. Schreiben Sie dann HTML-Code, der zu diesem Selektor passt. Hier ist der Code mit dem Selektor:

cssh2.zzz {
  color: red;
}

Задание 2

Erklären Sie, was der Selektor im unten angegebenen Code auswählt. Schreiben Sie dann HTML-Code, der zu diesem Selektor passt. Hier ist der Code mit dem Selektor:

cssh2 .zzz {
  color: red;
}

Задание 3

Erklären Sie, was der Selektor im unten angegebenen Code auswählt. Schreiben Sie dann HTML-Code, der zu diesem Selektor passt. Hier ist der Code mit dem Selektor:

css.bbb.zzz {
  color: red;
}

Задание 4

Erklären Sie, was der Selektor im unten angegebenen Code auswählt. Schreiben Sie dann HTML-Code, der zu diesem Selektor passt. Hier ist der Code mit dem Selektor:

css.bbb .zzz {
  color: red;
}

Задание 5

Erklären Sie, was der Selektor im unten angegebenen Code auswählt. Schreiben Sie dann HTML-Code, der zu diesem Selektor passt. Hier ist der Code mit dem Selektor:

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

Задание 6

Erklären Sie, was der Selektor im unten angegebenen Code auswählt. Schreiben Sie dann HTML-Code, der zu diesem Selektor passt. Hier ist der Code mit dem Selektor:

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

Задание 7

Erklären Sie, was der Selektor im unten angegebenen Code auswählt. Schreiben Sie dann HTML-Code, der zu diesem Selektor passt. Hier ist der Code mit dem Selektor:

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

Задание 8

Erklären Sie, was der Selektor im unten angegebenen Code auswählt. Schreiben Sie dann HTML-Code, der zu diesem Selektor passt. Hier ist der Code mit dem Selektor:

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

Задание 9

Erklären Sie, was der Selektor im unten angegebenen Code auswählt. Schreiben Sie dann HTML-Code, der zu diesem Selektor passt. Hier ist der Code mit dem Selektor:

css#elem.bbb {
  color: red;
}

Задание 10

Erklären Sie, was der Selektor im unten angegebenen Code auswählt. Schreiben Sie dann HTML-Code, der zu diesem Selektor passt. Hier ist der Code mit dem Selektor:

css#elem .bbb {
  color: red;
}