Finden Sie heraus, was ein CSS-Descendant-Selektor ist

Die Struktur eines HTML-Dokuments ähnelt einem Familienstammbaum. In Ihrer Familie haben Sie Ihre Eltern und andere, die vor Ihnen gekommen sind. Das sind deine Vorfahren. Kinder und diejenigen, die auf diesem Baum nach Ihnen kommen, sind Ihre Nachkommen. HTML funktioniert auf ähnliche Weise. Elemente, die sich in anderen Elementen befinden, sind ihre Nachkommen. Zum Beispiel, da sich fast jedes HTML-Element innerhalb von befindet Tags wären sie ein Nachkomme davon Elemente. Diese Beziehung ist wichtig, wenn Sie mit CSS arbeiten und bestimmte Elemente gezielt anwenden müssen, um visuelle Stile anzuwenden.

CSS-Nachkomme-Selektoren

Ein CSS-Nachkommen-Selektor gilt für die Elemente, die sich in einem anderen Element befinden (oder genauer gesagt auf ein Element, das ein Nachkomme eines anderen Elements ist). Eine ungeordnete Liste hat beispielsweise ein Tag mit Tags als Nachkommen. Verwenden wir den folgenden HTML-Code als Beispiel:

• Das ist ein Link

Das LI Tags sind Nachkommen der UL Etikett. Das EIN Tag ist ein Nachkomme von beide das LI (Nachkommen von Kindern) und UL (Enkelkind Nachkomme) Tags. Wenn Sie darüber nachdenken, denken Sie am Beispiel des Stammbaums nach

wäre das Elternteil, das
• wäre das Kind dieses Elements, und das wäre das Kind des
• und das Enkelkind der
  .

  Wie würden Sie also bestimmte Elemente auf einer Webseite mit diesen Nachkommen auswählen? Zunächst müssen Sie Nachkommen-Selektoren definieren, indem Sie zwei (oder mehr) Typ-Selektoren verwenden, die durch Leerzeichen getrennt sind.

  li a {Textdekoration: keine; }

  In diesem Beispiel würden die Stile nur für ein Linkelement () gelten, das ein Nachkomme eines Listenelementelements ist (

  • ). Alle anderen Links auf der Seite, die keine Nachkommen eines Listenelements sind, erhalten diesen Stil nicht.

    Es ist wichtig zu wissen, dass es egal ist, wie viele Tags sich zwischen den Tags befinden, die Sie möglicherweise in Ihrer Nachkommen-Auswahl verwenden. Wenn das zweite Element irgendwo innerhalb des ersten Elements eingeschlossen ist, wird es als Nachkomme ausgewählt.

    Wenn Sie alle Anker auswählen möchten, die von den ul-Elementen abstammen, würden Sie Folgendes schreiben:

    ul a {Textdekoration: keine; }

    Diese Stile gelten jetzt für jeden Link, der ein Nachkomme eines Listenelements ist. Sie können diesen Selektor auch schreiben

    ul li a {Textdekoration: keine; }

    Dies ist eine Nachkommen-Auswahl, die mehr als zwei Typenauswahl verwendet. In diesem Fall würde dies für Links gelten, die sich innerhalb eines Listenelements und auch innerhalb einer ungeordneten Liste befinden.

    Verwenden von Klassen- und ID-Selektoren

    Die Selektoren, von denen Sie abstammen, müssen nicht immer Nachkommen vom Typ sein. Stellen Sie sich zum Beispiel vor, Sie hätten einen Bereich der Website (wie eine Abteilung) mit einem ID-Attribut "Billboard". Sie können aus dieser ID einen Nachkommenselektor einrichten:

    #billboard ul {Hintergrundfarbe: #ccc; }

    Dies würde die ungeordnete Liste gestalten, die ein Nachkomme eines Elements mit der ID "Billboard" ist. Sie können dasselbe für Klassenwerte tun.

    div.billboard ul {Hintergrundfarbe: #ccc; }

    Dies setzt voraus, dass die Sparte den Klassenwert "Billboard" hat. Das CSS oben würde das Formatieren

    Element innerhalb einer Division, die diesen Klassenwert hat.

    Sie können mit Nachkommen-Selektoren wirklich hartnäckig und verbos sein. Wenn Sie zum Beispiel Ihren HTML-Code mit Dreamweaver erstellen, gibt es eine Einstellung, wenn Sie neue CSS-Regeln hinzufügen, die den Selektor anhand der Platzierung des Cursors auf dieser Seite automatisch erstellen. In diesen Fällen erstellt Dreamweaver einen wilden, ausführlichen und langen Nachfolger. So viel Besonderheit ist für das Funktionieren Ihres CSS nicht erforderlich. Sie möchten ein Gleichgewicht zwischen einer Nachkommen-Auswahl finden, die so spezifisch ist, dass Sie zu den Elementen gelangen können, die Sie benötigen (ohne die Elemente, die Sie nicht beeinflussen möchten), ohne CSS-Regeln zu haben, die übermäßige Auswahlmöglichkeiten haben groß