Heim > Artikel > Web-Frontend > Wie wähle ich mit CSS alle untergeordneten Elemente eines Elements (außer dem letzten) aus?

Wie wähle ich mit CSS alle untergeordneten Elemente eines Elements (außer dem letzten) aus?

PHPznach vorne: 2023-09-16 08:45:072102Durchsuche

如何使用 CSS 选择元素的所有子元素（除了最后一个子元素）？

CSS ist ein häufig verwendeter Webseitenstil. Bei der Entwicklung von Webanwendungen müssen wir manchmal unterschiedliche Stile auf verschiedene Elemente anwenden. Diese allgemeine Anforderung besteht darin, alle untergeordneten Elemente eines Elements außer dem letzten auszuwählen! Wenden Sie CSS an, um alle untergeordneten Elemente eines Elements auszuwählen (außer dem letzten untergeordneten Element).

In diesem Artikel erfahren Sie, wie Sie mit verschiedenen Methoden alle bis auf das letzte untergeordnete Element in CSS auswählen. Wir besprechen jede Methode und ihre Syntax im Detail und geben Beispiele, die Ihnen helfen, ihre Funktionsweise zu verstehen.

Die erste Möglichkeit, alle untergeordneten Elemente außer dem letzten auszuwählen, besteht darin, den Selektor :not() zu verwenden, der es Ihnen ermöglicht, alle Elemente auszuwählen, die nicht mit einem bestimmten Selektor übereinstimmen. Die zweite Methode beinhaltet die Verwendung des Selektors :nth-last-child(), der alle Elemente auswählt, die das n-te untergeordnete Element vom Ende des übergeordneten Elements sind. Bei dieser Methode geben wir den Parameter n+2 an, der dabei hilft, alle untergeordneten Elemente des Elements auszuwählen (außer dem letzten untergeordneten Element in HTML).

Beide Methoden sind bei der Entwicklung von Webanwendungen sehr nützlich und können bei der Implementierung der für die Webseite erforderlichen Benutzeroberfläche hilfreich sein. Die Verwendung der oben besprochenen Selektoren hilft uns zu verstehen, wie diese Selektoren funktionieren, und wir können benutzerdefinierte Stile für Funktionalität und Benutzeroberfläche für unsere Webseiten erstellen.

Methode 1: Verwenden Sie „:not selector“

– Der Not-Selektor ist ein leistungsstarker CSS-Selektor, mit dem Sie alle Elemente auswählen können, außer denen, die einer bestimmten Bedingung entsprechen. Um alle untergeordneten Elemente außer dem letzten auszuwählen, können wir :not selector mit :last-child selector verwenden.

Um alle Kinder eines Elements (außer dem letzten Kind) mit dem Selektor - not() auszuwählen, verwenden wir ihn mit dem Selektor :last-child. :last-child selector hilft bei der Auswahl des letzten untergeordneten Elements eines Elements. Durch die Kombination dieses Ansatzes mit zwei Selektoren können wir alle untergeordneten Elemente eines Elements außer dem letzten auswählen.

Hier ist die Syntax für die Verwendung des :not()-Selektors zur Auswahl aller untergeordneten Elemente eines übergeordneten Elements (außer dem letzten untergeordneten Element) -

Grammatik

In der folgenden Syntax ist .parent der Selektor für das übergeordnete Element, > wählt alle seine unmittelbaren untergeordneten Elemente aus, * wählt alle untergeordneten Elemente aus und :not(:last-child) schließt das letzte untergeordnete Element von der Auswahl aus.

.parent > *:not(:last-child) {
  /* styles for all children except the last one */
}

Beispiel

In diesem Beispiel wählt der CSS-Selektor .parent > *:not(:last-child) alle direkten untergeordneten Elemente des Klassenelements .parent aus (d. h. h1-, h2-, p- und span-Elemente), mit Ausnahme des letzten untergeordneten Elements, d. h. Element. Mithilfe von CSS wenden wir die Eigenschaft „color“ auf die ersten drei untergeordneten Elemente des .parent-Elements (d. h. die h1-, h2- und p-Elemente) an, während das vierte untergeordnete Element (d. h. das -Element) nicht betroffen ist. 跨度>跨度>

Jetzt sehen wir uns an, wie man den CSS-Code auf den Code der HTML-Seite anwendet -

<!DOCTYPE html>
<html >
   <head>
      <style>
         .parent > *:not(:last-child) {
            color: green;
         }
      </style>
   </head>
   <body>
      <div class="parent">
         <h1>First Child</h1>
         <h2>Second Child</h2>
         <p>Third Child</p>
         <span>Fourth Child</span>
      </div>
   </body>
</html>

Methode 2: Verwenden Sie den Selektor :nth-last-child()

– Der Selektor nth-last-child() ist ein weiteres nützliches Werkzeug in CSS, mit dem Sie Elemente basierend auf ihrer Position in der Liste der untergeordneten Elemente der Elemente auswählen können. Wir können dies verwenden, um alle bis auf das letzte Kind auszuwählen, indem wir :nth-last-child(n+2) verwenden, um alle bis auf das letzte Kind auszuwählen.

Um mit dem Selektor :nth-last-child() alle bis auf das letzte untergeordnete Element auszuwählen, können wir den Parameter n+2 angeben. Die definierten Parameter verwenden CSS, um alle Elemente des HTML auszuwählen, mit Ausnahme des letzten untergeordneten Elements, das das letzte untergeordnete Element ist.

Hier ist die Syntax für die Verwendung des Selektors :nth-last-child() zur Auswahl aller untergeordneten Elemente eines übergeordneten Elements (außer dem letzten untergeordneten Element) -

Grammatik

In der folgenden Syntax ist .parent der Selektor des übergeordneten Elements, > wählt alle seine direkten untergeordneten Elemente aus, * wählt alle untergeordneten Elemente aus, :nth-last-child(n+2) wählt alle untergeordneten Elemente außer dem letzten elementaren untergeordneten Element aus .

.parent > *:nth-last-child(n+2) {
   /* styles for all children except the last one */
}

Beispiel

In diesem Beispiel wählt der CSS-Selektor .parent > *:nth-last-child(n+2) alle direkten untergeordneten Elemente des Klassenelements .parent aus, mit Ausnahme des letzten untergeordneten Elements. Hier werden alle Schaltflächenelemente innerhalb des .parent-Elements ausgewählt, das letzte Schaltflächenelement wird jedoch nicht ausgewählt.

Auf die ersten drei Schaltflächen wurden mehrere CSS-Eigenschaften angewendet, der CSS-Stil wird jedoch nicht zur letzten untergeordneten Schaltfläche hinzugefügt.

Jetzt sehen wir uns an, wie man den CSS-Code auf den Code der HTML-Seite anwendet -

<!DOCTYPE html>
<html >
   <head>
      <style>
         .parent > *:nth-last-child(n+2) {
            background-color: green;
            padding: 10px;
            color: white;
            border-radius: 10px;
            width: 10em;
            text-decoration: none;
            font-family: sans-serif;
            border: none;
         }
      </style>
   </head>
   <body>
      <div class="parent">
      <button>First</button>
      <button>Second</button>
      <button>Third</button>
      <button>Fourth</button>
   </div>
   </body>
</html>

结论

在本文中，我们了解了如何使用不同的方法选择元素的所有子元素（除了最后一个子元素）。在 CSS 选择器的帮助下，选择子项是一个轻松的过程，因为它提供了多个可用于执行此任务的选择器，例如 :not() 选择器和 :nth-last-child() 选择器。上面讨论的两个示例都展示了 CSS 在将不同样式应用于元素的所有子元素（最后一个元素除外）方面的作用。这两个选择器都可以帮助我们轻松地将不同的 CSS 样式应用于不同的 HTML 元素，不仅如此，它还有助于轻松创建动态网站。

Das obige ist der detaillierte Inhalt vonWie wähle ich mit CSS alle untergeordneten Elemente eines Elements (außer dem letzten) aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html 选择器 ui

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie ändere ich die Farbe eines Optionsfelds mithilfe von CSS?Nächster Artikel：Wie ändere ich die Farbe eines Optionsfelds mithilfe von CSS?

In Verbindung stehende Artikel

Mehr sehen