DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die Pseudo-Klasse :blank baut auf der Pseudo-Klasse :empty auf. Wie :empty wählt :blank Elemente aus, die überhaupt nichts enthalten oder nur einen HTML-Kommentar. Aber :blank wählt auch Elemente aus, die Leerzeichen enthalten, was :empty nicht tut.
p:blank {
display: none;
}p:blank wählt diese Absätze aus, genau wie p:empty
<p></p>
<p><!-- nothing but a comment--></p>Und es wählt auch diese Absätze aus, die p:empty nicht auswählen würde
<p> </p>
<p>
<!--a comment and some whitespace-->
</p>Zum Zeitpunkt der Erstellung dieses Dokuments ist :blank Teil des Entwurfs für CSS Selectors Level 4 und wird von keinem Browser unterstützt. Mozilla unterstützt eine eigene Version von :blank unter einem anderen, herstellerspezifischen Namen: :-moz-only-whitespace. Die untenstehende Demo enthält Mozillas Version und funktioniert vorerst nur in Mozilla-Browsern.
Siehe den Stift :blank und :-moz-only-whitespace von mariemosley (@mariemosley) auf CodePen.
Verwandt
Weitere Informationen
Browser-Unterstützung
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Nein | Nein | Als :-moz-only-whitespace | Nein | Nein | Nein | Nein |
Hoffentlich wird das nicht aus dem Entwurf gestrichen. Ich hatte ein paar Fälle, in denen das nützlich gewesen wäre, und bin froh, dass es in irgendeiner Form behandelt wird!
Wäre das eine schnelle Lösung für leere
von WordPresss wautop erstellt?
p-Tags, meine ich
Ich hoffe wirklich, dass dies in die endgültige CSS Selectors Level 4-Spezifikation aufgenommen wird, da dies sehr nützlich wäre und nicht über JavaScript gelöst werden müsste.
Das wäre besonders nützlich bei AngularJS-Kommentaren für
ng-if/ng-repeat, wo die Kommentare absolut zwingend erforderlich sind – man kann sie nicht entfernen und sie haben standardmäßige Einrückungen und Zeilenumbrüche.Allgemein sind AngularJS-Kommentare aus mehreren Gründen eine Zumutung: visuelles Durcheinander im DOM und Behandlung als DOM-Knoten von vielen CSS-Selektoren, nämlich
:first-childund:last-child.Für alle, die nach einer schnellen Übergangslösung suchen (ich habe dies mit Angular verwendet)
Fügen Sie einen Div in Ihren Container ein und zielen Sie darauf mit :only-child ab
Danke!! Es hat ein riesiges Problem gelöst, mit dem ich zu kämpfen hatte.
Das hilft nicht wirklich, wenn man einem leeren Abschnitt „display: none“ hinzufügen möchte. Wir brauchen etwas wie :blank für diesen Anwendungsfall.
Das wählt doch nur den isEmpty-Div aus, oder? Wie würde das beim Styling des Containers helfen?
Die Demo im Beitrag ist ein ziemlich gutes Beispiel dafür, wie hilfreich es sein kann, spezifische leere Inhaltinstanzen von ansonsten gleichen HTML-Elementen auszuwählen. Es ist ein Unterscheidungsmerkmal und, je nach Anwendungsfall, kann das super hilfreich sein.
Ich bin nur hierher gekommen, um zu sagen, dass ich heute einen Bedarf dafür gefunden habe. Grundsätzlich habe ich Folien auf der linken Seite und Notizen auf der rechten Seite, geteilt durch einen Flex-Container. Wenn der Notizen-Div leer ist, sollte er eigentlich nicht angezeigt werden (display: none;). Da er jedoch etwas Leerraum enthält, funktioniert etwas wie :empty nicht.
Wir werden es jetzt durch mehr Backend-Code lösen, aber wenn etwas wie dies durch CSS gelöst werden könnte, würde das die Dinge erheblich erleichtern.
Diese Funktion wäre wirklich nützlich und cool!
In CSS Selectors Level 4 wurde
:emptyneu definiert, sodass es auch Leerzeichen erkennt und:blanknur leere Textareas und Inputs auswählt.Referenz: https://developer.mozilla.org/en-US/docs/Web/CSS/:blank