What is :empty? how to use?

:What is empty? This article will introduce you to the relevant knowledge of :empty, so that everyone can have a certain understanding of :empty. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First of all, let’s understand: What is empty? what's the effect?

:empty is a CSS pseudo-class selector, used to select empty elements on the page.

If an element does not have any child elements (nodes) or text content, the element counts as empty. Comments and processing directives do not affect whether an element is empty. For example:

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

will be considered empty and then selected by :empty, while:

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

will not be considered empty and therefore does not match the selector.

Selecting empty elements is useful for hiding these elements as they may be the cause of strange vertical and/or horizontal white space if they have padding. It is also useful for removing empty elements in dynamic environments where they are no longer needed or useful. Example:

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

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

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

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

Explanation:

1. The content generated by pseudo elements::before and ::after is not counted as "real" content, even if they exist inside the element, they are not considered "real" content. Will affect the white space between elements.

2. Spaces and empty sub-elements within an element are counted as character information within the element, so if the element contains one of the two elements, the element is no longer considered empty. For example, the following two elements are not considered empty:

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

3. Since spaces are considered content, open but not closed element tags will not be empty. For example:

< p >

4. If the start tag is followed by another tag, it is considered empty again.

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

5. If an open tag is followed by another open tag that does not directly follow another tag, the first tag is considered empty, but the second tag is not (because of whitespace). For example:

< p > < p >

6. Self-closing elements such as

Let’s take a look at the use of :empty through a simple example:

Example demonstration: Apply a flaxen background to an empty paragraph

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:

The above is the detailed content of What is :empty? how to use?. For more information, please follow other related articles on the PHP Chinese website!