Firefox无法为:empty元素设置样式问题及修复方案咨询

原代码在Chrome和Safari中能正常展示占位符，但Firefox里带contenteditable的<td>元素无法触发:empty伪类，导致占位符不显示；移除:empty后占位符又会一直显示，不符合需求。可以通过以下两种方式解决：

方法一：结合CSS伪类与空白内容检测 #

Firefox对:empty的判定更严格，即使单元格内有隐形空白字符（比如换行、空格）也会认为非空。可以使用:blank伪类（Firefox原生支持）配合:empty，同时确保HTML中<td>标签内部没有任何空白：

修改后的CSS #

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid gray;
  padding: 3px 6px;
}

/* 同时匹配空内容或仅含空白的元素 */
[contenteditable]:is(:empty, :blank):not(:focus)::before {
  content: attr(data-placeholder);
  color: gray;
  font-size: .9rem;
}

注意事项 #

HTML中<td>标签要写成闭合形式且内部无空白，比如：

<td contenteditable="true" data-placeholder="Firstname"></td>

不要写成带换行的形式，避免隐形空白干扰判定。

方法二：JS动态控制状态（兼容性更好） #

如果需要兼容更多浏览器，或者担心:blank的支持性，可以用JS监听单元格的输入事件，动态添加/移除状态类：

完整代码 #

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid gray;
  padding: 3px 6px;
}

/* 通过自定义类判断是否显示占位符 */
[contenteditable].no-content:not(:focus)::before {
  content: attr(data-placeholder);
  color: gray;
  font-size: .9rem;
}

<table>
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td contenteditable="true" data-placeholder="Firstname" class="no-content"></td>
      <td contenteditable="true" data-placeholder="Lastname" class="no-content"></td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
  </tbody>
</table>

<script>
// 获取所有可编辑的单元格
const editableCells = document.querySelectorAll('[contenteditable="true"]');

editableCells.forEach(cell => {
  // 初始化状态
  updateCellClass(cell);
  
  // 监听输入事件
  cell.addEventListener('input', () => {
    updateCellClass(cell);
  });
  
  // 监听失焦事件（处理删除所有内容后的状态）
  cell.addEventListener('blur', () => {
    updateCellClass(cell);
  });
});

// 更新单元格的状态类
function updateCellClass(cell) {
  // 去除首尾空白后判断是否为空
  const hasContent = cell.textContent.trim() !== '';
  cell.classList.toggle('no-content', !hasContent);
}
</script>

这种方法通过JS主动判断单元格内容是否为空，兼容性更强，不受浏览器对:empty伪类的判定差异影响。

内容的提问来源于stack exchange，提问作者pistou