Inhaltsverzeichnis
Wann :empty gilt
Praktische Verwendungen von :empty
1. leere Behälter verbergen
2. Fügen Sie Platzhalterstyling hinzu
3. Formularvalidierung oder dynamischer Inhalt
Einschränkungen und Gotchas
Beispiel: Layout mit optionalen Elementen reinigen
Heim Web-Frontend CSS-Tutorial Wie benutze ich die CSS: leere Pseudoklasse?

Wie benutze ich die CSS: leere Pseudoklasse?

Aug 05, 2025 am 09:48 AM
css :empty

Die: leere Pseudoklasse wählt Elemente ohne Kinder oder Inhalte aus, einschließlich Leerzeichen oder Kommentaren. Daher stimmen nur leere Elemente wie

<div>
mit ihm überein. 1. Es kann leere Behälter ausblenden, indem es: leer {Anzeige: Keine; }, um Layouts aufzuräumen; 2. Es ermöglicht das Hinzufügen von Placeholder -Stylen über :: vor oder :: nach, was funktioniert, da generierte Inhalte nicht den: leeren Zustand während der Auswahl beeinflussen; 3.. Es hilft in Form von Formularvalidierung oder dynamischem Inhalt durch Stylen leerer Felder, obwohl die Whitespace das Übereinstimmung verhindert und Kommentare nicht als Inhalt gelten, was zu strikt, aber nützlich ist, um optionale oder fehlende Inhalte ordnungsgemäß zu verwalten.

Wie benutze ich die CSS: leere Pseudoklasse?

Die :empty Pseudoklasse in CSS wählt Elemente aus, die keine Kinder oder Inhalte haben-einschließlich Text, Räume oder anderen Elementen. Es ist nützlich, um Elemente zu stylen oder zu zielen, die wirklich leer sind, was auf dynamischen Websites hilfreich sein kann, auf denen Inhalte möglicherweise nicht immer vorhanden sind.

Wie benutze ich die CSS: leere Pseudoklasse?

Wann :empty gilt

Ein Element wird berücksichtigt :empty , wenn es absolut nichts enthält, nicht einmal Weiße oder Kommentare. Zum Beispiel:

 <div> </div> <!-das stimmt: leer->
<span> </span> <!-das stimmt: leer->
<p> </p> <!-stimmt nicht überein-hat einen Raum->
<div> </div> <!-stimmt nicht überein-hat Whitespace->
<button> <span> </span> </button> <!-stimmt nicht überein-hat ein untergeordnetes Element->
 div: leer {
  Hintergrundfarbe: Gelb;
  Höhe: 20px;
}

In diesem Fall wird nur die erste <div> gestylt, weil es wirklich leer ist.

Wie benutze ich die CSS: leere Pseudoklasse?

Praktische Verwendungen von :empty

1. leere Behälter verbergen

Sie können Elemente ausblenden, die keinen Inhalt haben, was auf CMS-gesteuerten Websites häufig vorkommt, an denen Felder optional sind.

 SideBar-Box: leer {
  Anzeige: Keine;
}

Dies verhindert, dass leere Seitenleisten, Warnungen oder Platzhalter Platz einnehmen.

Wie benutze ich die CSS: leere Pseudoklasse?

2. Fügen Sie Platzhalterstyling hinzu

Verwenden :empty mit ::before oder ::after dem Einfügen von Nachrichten oder Indikatoren (obwohl Hinweis: Einfügen generierter Inhalte mit ::before / ::after macht das Element nicht mehr leer , also :empty wird nicht übereinstimmen).

⚠️ WICHTIG: Wenn Sie dies tun:

 div: leer :: vor {
  Inhalt: "Dieses Feld ist leer";
}

Das ::before fügt Inhalte hinzu, sodass das Element nicht mehr als leer angesehen wird - aber die Regel gilt immer noch, da die Überprüfung für :empty vor dem generierten Inhalt hinzugefügt wird. Dies funktioniert also zur Anzeige, aber das Element bleibt für Auswahlzwecke "leer".

3. Formularvalidierung oder dynamischer Inhalt

Verwendung :empty bis stile erforderliche Felder, die leer gelassen wurden (kombiniert mit JavaScript oder einer anderen Logik):

 .Compment: leer {
  Grenze: 2PX gestrichelt #CCC;
}

Dies kann visuell auf einen Platzhalter-ähnlichen Zustand hinweisen.

Einschränkungen und Gotchas

  • Whitespace Matters : Auch ein einzelner Speicherplatz, ein Zeilenumbruch oder eine Registerkarte in einem Element verhindert :empty vom Übereinstimmung.

  • Kommentare zählen nicht : HTML -Kommentare in einem Element zählen nicht als Inhalt, also:

     <div> <!-bald kommen-> </div>

    Dieser <div> ist still :empty .

  • Erzeugte Inhaltsvorbehalte : Während Sie stylen können :empty::before ändert das Hinzufügen, dass Inhalte den :empty Status für andere Regeln nicht ändert - aber es wirkt sich auf Layout und Aussehen aus.

Beispiel: Layout mit optionalen Elementen reinigen

 <artikels>
  <h2> Artikeltitel </H2>
  <p> Inhalt hier. </p>
  <beiseite> </beiseite> <!-wird versteckt sein->
</article>
 beiseite: leer {
  Anzeige: Keine;
}

Dies hält Ihr Layout sauber, wenn optionale Abschnitte keinen Inhalt haben.


Grundsätzlich: :empty ist ein einfaches, aber leistungsfähiges Werkzeug, um fehlende Inhalte anmutig zu behandeln - denken Sie daran, dass es streng ist, was „leer“ bedeutet.

Das obige ist der detaillierte Inhalt vonWie benutze ich die CSS: leere Pseudoklasse?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

PHP-Tutorial
1511
276
Was sind die Apps für virtuelle Währungshandel? _Die Top Ten empfohlene offizielle Apps Virtual Currency Trading Apps im Jahr 2025 Was sind die Apps für virtuelle Währungshandel? _Die Top Ten empfohlene offizielle Apps Virtual Currency Trading Apps im Jahr 2025 Aug 08, 2025 pm 06:42 PM

1. Binance ist bekannt für sein riesiges Transaktionsvolumen und die reichhaltigen Handelspaare. Es bietet diversifizierte Handelsmodelle und perfekte Ökosysteme. Es gewährleistet auch die Sicherheit von Benutzeranlagen über SAFU -Fonds und mehrere Sicherheitstechnologien und erhält den konformen Vorgängen von großer Bedeutung. 2. OKX Ouyi bietet eine breite Palette von Handelsdiensten für digitale Asset und einheitliche Handelskonto -Modelle, bereitet das Web3 -Feld aktiv bereit und verbessert die Sicherheit und Erfahrung der Transaktion durch strenge Risikokontrolle und Benutzerausbildung. 3.. Gate.io Sesam öffnet die Tür und verfügt über eine gute Währungsgeschwindigkeit und eine reichhaltige Währung, bietet diversifizierte Handelsinstrumente und Wertschöpfungsdienste, nimmt mehrere Sicherheitsüberprüfungsmechanismen an und hält sich an die Transparenz von Asset-Reserven zur Verbesserung des Benutzervertrauens. V.

So verwenden Sie VW- und VH -Einheiten in CSS So verwenden Sie VW- und VH -Einheiten in CSS Aug 07, 2025 pm 11:44 PM

VW- und VH -Einheiten erreichen reaktionsschnelles Design, indem sie Elementgrößen mit Ansichtsfenster und Höhe in Verbindung bringen. 1 VW entspricht 1% der Ansichtsfensterbreite, und 1 VH entspricht 1% der Ansichtsfensterhöhe; häufig im Vollbildbereich, reaktionsschnellen Schriftarten und elastischen Abstand verwendet; 1. Verwenden Sie im Vollbildbereich 100VH oder besser 100DVH, um den Einfluss der Mobile Browser -Adressleiste zu vermeiden. 2. Responsive Schriftarten können mit 5 VW begrenzt und mit einer Klemme (1,5REM, 3VW, 3REM) in Kombination der minimalen und maximalen Größe begrenzt werden. 3. Elastischer Abstand wie Breite: 80VW, Rand: 5VHAUTO, Polsterung: 2VH3VW, kann das Layout anpassungsfähig machen; Achten Sie auf Kompatibilität, Zugänglichkeit und Inhaltskonflikte für mobile Geräte. Es wird empfohlen, zuerst DVH zu verwenden.

So erstellen Sie eine vertikale Linie mit CSS So erstellen Sie eine vertikale Linie mit CSS Aug 11, 2025 pm 12:49 PM

Verwenden Sie einen DIV mit Rand, um schnell vertikale Linien zu erstellen und Stile und Höhen zu definieren, indem Sie randlinks und Höhe einstellen. 2. Verwendung :: vor oder :: Nach Pseudoelementen, um vertikale Linien ohne zusätzliche HTML-Tags hinzuzufügen, die für die dekorative Trennung geeignet sind; 3. In Flexbox -Layout können adaptive vertikale Trennwände zwischen elastischen Behältern erreicht werden, indem die Breite und die Hintergrundfarbe der Trennklasse festgelegt werden. 4. Fügen Sie in CSSGrid vertikale Linien als unabhängige Spalten (z. B. Autowidth -Spalten) in das Gitterlayout ein, das für reaktionsschnelles Design geeignet ist. Die am besten geeignete Methode sollte gemäß dem spezifischen Layout ausgewählt werden, um sicherzustellen, dass die Struktur einfach und leicht zu warten ist.

So verwenden Sie die Filtereigenschaft in CSS So verwenden Sie die Filtereigenschaft in CSS Aug 11, 2025 pm 05:29 PM

ThecssFilterPropertyAllowsvisualeffects-ähnlich, Helligkeit und GryscaletobeAppliedDirecttoHtmlelements.1) Usethesyntaxfilter: Filterfunktion (Wert) toappyeffects.2) Kombination

Was sind CSS-Pseudoklassen und wie man sie benutzt? Was sind CSS-Pseudoklassen und wie man sie benutzt? Aug 06, 2025 pm 01:06 PM

Die CSS-Pseudo-Klasse ist ein Schlüsselwort, mit dem der spezielle Zustand eines Elements definiert wird. Es kann dynamisch Stile anwenden, basierend auf Benutzerinteraktion oder Dokumentenort. 1.: Hover wird ausgelöst, wenn die Maus schwebt, z. B. die Taste: HOVER ändert die Knopffarbe. 2.: Fokus wirkt sich in Wirksamkeit, wenn das Element den Fokus erhält und die Zugänglichkeit verbessert. 3.: nt-child () wählt Elemente nach Position aus und unterstützt ungerade, sogar oder Formeln wie 2n 1; 4.: Erstkind und: Last-Kind Wählen Sie die ersten bzw. letzten Kinderelemente aus; 5.:Not () schließt Elemente aus, die den angegebenen Bedingungen entsprechen; 6.: Besuchen und: Link -Set -Stile basierend auf dem Linkzugriffsstatus, aber: Besucht wird durch Privatsphäre eingeschränkt.

Wie können Sie eine CSS -Klasse mit JavaScript aus einem DOM -Element entfernen? Wie können Sie eine CSS -Klasse mit JavaScript aus einem DOM -Element entfernen? Aug 05, 2025 pm 12:51 PM

Die häufigste und empfohlene Methode zum Entfernen von CSS -Klassen aus DOM -Elementen unter Verwendung von JavaScript ist die Methode von REME () der Classlist -Eigenschaft. 1. Verwenden Sie Element.ClassList.remove ('className'), um einen einzelnen oder mehrere Klassen sicher zu löschen, und es wird kein Fehler gemeldet, selbst wenn die Klasse nicht vorhanden ist. 2. Die alternative Methode besteht darin, die Eigenschaft der Klassenname direkt zu bedienen und die Klasse mit einem String -Austausch zu entfernen. Aufgrund der ungenauen regelmäßigen Übereinstimmung oder einer unsachgemäßen Raumverarbeitung ist es jedoch einfach, Probleme zu verursachen, sodass sie nicht empfohlen wird. 3. Sie können zuerst beurteilen, ob die Klasse existiert, und sie dann durch Element.ClassList.Contains () löschen, aber es ist normalerweise nicht erforderlich. 4. Classlist

So verwenden Sie CSS -Selektoren effektiv So verwenden Sie CSS -Selektoren effektiv Aug 11, 2025 am 11:12 AM

Bei der Verwendung von CSS-Selektoren sollten zuerst niedrig spezifische Selektoren verwendet werden, um übermäßige Einschränkungen zu vermeiden. 1. Verstehen Sie die Spezifitätsniveau und verwenden Sie sie in der Reihenfolge von Typ, Klasse und ID vernünftigerweise; 2. Verwenden Sie Mehrzweck-Klassennamen, um die Wiederverwendbarkeit und Wartbarkeit zu verbessern. 3.. Verwenden Sie Attribute und Pseudo-Klasse-Selektoren, um Leistungsprobleme zu vermeiden. 4. Halten Sie den Selektor kurz und klar; 5. Verwenden Sie BEM und andere Namensschwerpunkte, um die strukturelle Klarheit zu verbessern. 6. Vermeiden Sie den Missbrauch von Tag-Selektoren und: N-ten Kind und geben Sie der Verwendung von Werkzeugklassen oder modularen CSS Vorrang, um sicherzustellen, dass der Stil für lange Zeit kontrollierbar ist.

Wie benutze ich CSS Clamp () für reaktionsschnelle Typografie? Wie benutze ich CSS Clamp () für reaktionsschnelle Typografie? Aug 06, 2025 pm 04:51 PM

clamp () incssenablesfluid, ResponsivetypographyBysettingAvaluebetweenaminimum, bevorzugt und maximumsize; 1.Usclamp (min, bevorzugt, max)

See all articles