Qu'est-ce que : vide ? Comment utiliser ?

 : Qu’est-ce qui est vide ? Cet article vous présentera les connaissances pertinentes de :empty, afin que chacun puisse avoir une certaine compréhension de :empty. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Tout d’abord, comprenons : Qu’est-ce qui est vide ? Qu'est-ce que ça fait ?

:empty est un sélecteur de pseudo-classe CSS, utilisé pour sélectionner des éléments vides sur la page.

Un élément est considéré comme vide s'il n'a aucun élément enfant (nœuds) ni contenu textuel. Les commentaires et les directives de traitement n'affectent pas si un élément est vide. Par exemple :

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

sera considéré comme vide puis sélectionné par :empty, tandis que :

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

ne sera pas considéré comme vide et ne correspond donc pas au sélecteur.

La sélection d'éléments vides est utile pour masquer ces éléments car ils peuvent être à l'origine d'étranges espaces blancs verticaux et/ou horizontaux s'ils ont un remplissage. Il est également utile pour supprimer des éléments vides dans des environnements dynamiques où ils ne sont plus nécessaires ou utiles. Exemple :

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

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

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

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

Explication :

1. Le contenu généré par les pseudo éléments ::before et ::after n'est pas compté comme contenu "réel", même s'ils existent à l'intérieur de l'élément. , Cela n'affecte pas non plus les espaces entre les éléments.

2. Les espaces et les sous-éléments vides dans un élément sont comptés comme des informations de caractère dans l'élément, donc si l'élément contient l'un des deux éléments, l'élément n'est plus considéré comme vide. Par exemple, les deux éléments suivants ne sont pas considérés comme vides :

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

3. Puisque les espaces sont considérés comme du contenu, les balises d'éléments ouvertes mais non fermées ne seront pas vides. Par exemple :

< p >

4. Si la balise de début est suivie d'une autre balise, elle est à nouveau considérée comme vide.

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

5. Si une balise ouverte est suivie d'une autre balise ouverte qui ne suit pas directement une autre balise, la première balise est considérée comme vide, mais la deuxième balise ne l'est pas (à cause de l'espace blanc). Par exemple :

< p > < p >

6. Les éléments à fermeture automatique tels que

---

,
et :le sélecteur vide correspond.

Jetons un coup d'œil à l'utilisation de :empty à travers un exemple simple :

Exemple de démonstration : appliquer un fond de lin aux paragraphes vides

Code HTML :

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

code css :

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

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

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

Rendu :

Résumé : Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!