HTML如何设置空元素样式？empty伪类的用法是什么？

:empty

:empty

:empty

:empty

<div>

:empty

<div>

:empty

<div>

:empty

<div></div> <!-- 这是一个空元素，可以被:empty选中 -->
<div> </div> <!-- 这不是一个空元素，因为它包含一个空格文本节点 -->
<div><!-- 注释 --></div> <!-- 这也不是一个空元素，因为它包含一个注释节点 -->
<div><span></span></div> <!-- 这也不是一个空元素，因为它包含一个子元素 -->

:empty

div:empty {
  background-color: #f0f0f0;
  text-align: center;
  padding: 20px;
  font-style: italic;
  color: #999;
}

div:empty::before {
  content: "这里还没有内容";
}

<div>

::before

:empty

:empty

:empty

const element = document.querySelector('.my-element');

function updateEmptyState() {
  if (element.children.length === 0 && element.textContent.trim() === '') {
    element.classList.add('empty');
  } else {
    element.classList.remove('empty');
  }
}

// 初始检查
updateEmptyState();

// 监听内容变化
const observer = new MutationObserver(updateEmptyState);
observer.observe(element, { childList: true, subtree: true, characterData: true });

.my-element

updateEmptyState

empty

MutationObserver

updateEmptyState

:empty

.empty

.my-element.empty {
  /* 空元素时的样式 */
  background-color: #eee;
  padding: 10px;
  text-align: center;
}

:empty

:empty

display: none

:empty

display: none

visibility: hidden

div:empty {
  display: none; /* 隐藏空的div元素 */
}

<div>

:empty

:empty