Was ist :empty? Wie benutzt man?

:Was ist leer? Dieser Artikel führt Sie in das relevante Wissen über: empty ein, damit jeder ein gewisses Verständnis von: empty haben kann. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Lassen Sie uns zunächst verstehen : Was ist leer? Was macht es?

:empty ist ein CSS-Pseudoklassenselektor, der zum Auswählen leerer Elemente auf der Seite verwendet wird.

Ein Element gilt als leer, wenn es keine untergeordneten Elemente (Knoten) oder Textinhalte hat. Kommentare und Verarbeitungsanweisungen haben keinen Einfluss darauf, ob ein Element leer ist. Beispiel:

< div > <！ - 在这里评论 - > </ div >

wird als leer betrachtet und dann von :empty ausgewählt, während:

< div >
    文本和子节点。
    < p >这里有一些内容。</ p > </ div > < div >
    在这打字。
</ div >

nicht als leer betrachtet wird und daher nicht mit dem Selektor übereinstimmt.

Die Auswahl leerer Elemente ist nützlich, um diese Elemente auszublenden, da sie die Ursache für seltsame vertikale und/oder horizontale Leerräume sein können, wenn sie über Polsterung verfügen. Es ist auch nützlich, um leere Elemente in dynamischen Umgebungen zu entfernen, in denen sie nicht mehr benötigt oder nützlich sind. Beispiel:

/ *选择并隐藏页面上的所有元素* / 
* ：empty {
     display：none;
}

/ *选择并隐藏所有空段落* / 
p ：empty {
     display：none;
}

/ *选择并隐藏所有空的菜单项* / 
nav  a ：empty {
     display：none;
}

/ *选择表中的空表格单元格并对其应用背景颜色* / 
td ：empty {
     background-color：#eee ;
}

Erklärung:

1. Der durch Pseudoelemente::before, ::after generierte Inhalt wird nicht als „echter“ Inhalt gezählt, auch wenn er innerhalb des Elements vorhanden ist gelten nicht als „echter“ Inhalt. Beeinträchtigt den Leerraum zwischen den Elementen.

2. Leerzeichen und leere Unterelemente innerhalb eines Elements werden als Zeicheninformationen innerhalb des Elements gezählt. Wenn das Element also eines der beiden Elemente enthält, gilt das Element nicht mehr als leer. Beispielsweise gelten die folgenden zwei Elemente nicht als leer:

< p >  </ p >  <！ - 包含一个空格 - > 
< p > < span > </ span > </ p >  <！ - 包含一个空元素 - >

3. Da Leerzeichen als Inhalt betrachtet werden, sind offene, aber nicht geschlossene Element-Tags nicht leer. Zum Beispiel:

< p >

4. Wenn auf das Start-Tag ein weiteres Tag folgt, gilt es wieder als leer.

< p > < p >内容...... 

5. Wenn auf ein offenes Tag ein anderes offenes Tag folgt, das nicht direkt auf ein anderes Tag folgt, gilt das erste Tag als leer, das zweite Tag jedoch nicht (aufgrund des Leerraums). Zum Beispiel:

< p > < p >

6. Selbstschließende Elemente wie

---

,
und werden als leer betrachtet und mit „leer“ kombiniert Selektor-Übereinstimmungen.

Sehen wir uns die Verwendung von :empty anhand eines einfachen Beispiels an:

Beispieldemonstration: Flachshintergrund auf leere Absätze anwenden

HTML-Code :

<div class="container">
  <p>
    测试，测试，测试，测试，测试，测试，测试，测试，测试。
  </p>
  <p></p>
  <p>
    测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试！
  </p>
  <p class="pseudo"></p>
  <p><!-- 这里评论 --></p>
  <p><p></p>
</div>

CSS-Code:

.container {
  margin: 40px auto;
  max-width: 700px;
}

p:empty {
  background-color: linen;
  padding: 15px;
}

.pseudo::before {
  content: "::before添加内容";
}

Rendering:

Zusammenfassung: Das ist alles. Das Ganze Der Inhalt dieses Artikels soll für das Studium aller hilfreich sein.

Das obige ist der detaillierte Inhalt vonWas ist :empty? Wie benutzt man?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!