Was sind die Filterselektoren?

Zu den Filterselektoren gehören: erstes Kind, :letztes Kind, :ntes Kind, ntes letztes Kind, :nur untergeordnetes Kind, :nicht, :leer, :markiert, :aktiviert, :deaktiviert und :Fokus warten . Detaillierte Einführung: 1. :first-child, wählt das erste untergeordnete Element unter dem übergeordneten Element aus 2. :last-child, wählt das letzte untergeordnete Element unter dem übergeordneten Element aus usw.

Das Betriebssystem dieses Tutorials: Windows 10-System, DELL G3-Computer.

In der Webentwicklung werden Filterselektoren verwendet, um DOM-Elemente basierend auf bestimmten Bedingungen oder Regeln zu filtern und auszuwählen. Filterselektoren können Entwicklern dabei helfen, bei Bedarf bestimmte Elemente zur Bearbeitung, Stiländerung oder anderen Verarbeitung auszuwählen. Im Folgenden sind gängige Filterselektoren aufgeführt:

1. :first-child: Wählen Sie das erste untergeordnete Element unter dem übergeordneten Element aus. Wählen Sie beispielsweise das erste untergeordnete Element unter allen übergeordneten Elementen aus:

   :first-child {
     /* 样式 */
   }

2 :last-child: Wählen Sie das letzte untergeordnete Element unter dem übergeordneten Element aus. Wählen Sie beispielsweise das letzte untergeordnete Element unter allen übergeordneten Elementen aus:

   :last-child {
     /* 样式 */
   }

3 :nth-child(n): Wählen Sie das n-te untergeordnete Element unter dem übergeordneten Element aus. Der Wert von n kann mithilfe spezifischer Zahlen oder Formeln angegeben werden. Wählen Sie beispielsweise das 3. untergeordnete Element unter dem übergeordneten Element aus:

   :nth-child(3) {
     /* 样式 */
   }

4 :nth-last-child(n): Wählen Sie das n-te untergeordnete Element von unten unter dem übergeordneten Element aus. Ähnlich wie bei :nth-child können Sie bestimmte Zahlen oder Formeln verwenden, um den Wert von n anzugeben. Wählen Sie beispielsweise das vorletzte untergeordnete Element unter dem übergeordneten Element aus:

   :nth-last-child(2) {
     /* 样式 */
   }

5 :only-child: Wählen Sie das einzige untergeordnete Element unter dem übergeordneten Element aus. Wenn Sie beispielsweise nur ein untergeordnetes Element unter allen übergeordneten Elementen auswählen:

   :only-child {
     /* 样式 */
   }

6 :not(selector): Wählen Sie Elemente aus, die den angegebenen Selektor nicht erfüllen. Als Argumente können verschiedene Selektoren verwendet werden, um bestimmte Elemente auszuschließen. Wählen Sie beispielsweise alle Elemente aus, die keine „“-Tags sind:

   :not(a) {
     /* 样式 */
   }

7: Wählen Sie Elemente aus, die keine untergeordneten Elemente oder Textinhalte haben. Wählen Sie beispielsweise alle Elemente aus, die keine untergeordneten Elemente haben:

   :empty {
     /* 样式 */
   }

8 :checked: Wählen Sie ausgewählte Formularelemente aus (z. B. Kontrollkästchen oder Optionsfelder). Aktivieren Sie beispielsweise alle aktivierten Kontrollkästchen:

   :checked {
     /* 样式 */
   }

9. :aktiviert und :deaktiviert: Wählen Sie verfügbare und nicht verfügbare Formularelemente aus. Wählen Sie beispielsweise alle verfügbaren Eingabefelder aus:

   :enabled {
     /* 样式 */
   }

10 :focus: Wählen Sie das aktuell fokussierte Element aus. Wählen Sie beispielsweise das aktuell fokussierte Eingabefeld aus: