如何获取子元素ID？CSS实现遇阻及动态页面解决方案咨询

一、纯CSS无法实现你的需求 #

先说结论：CSS没办法让父元素的伪元素读取子元素的id，attr()函数只能获取当前元素自身的属性，根本没有跨元素读取属性的语法支持。

另外你碰到的文本输入框这类元素，属于替换型元素（比如<input>、<img>、<select>都在此列），这类元素由浏览器调用系统自带控件渲染，CSS的::before/::after伪元素无法插入到它们的内容流中，所以你的初始代码对这类元素完全无效。你尝试的attr(child.id)写法本身就不符合CSS语法规则，自然不会生效。

二、可行的解决办法 #

1. 静态页面的折中方案（CSS+HTML） #

如果页面是静态的，可以给所有替换型元素套一个父容器，把子元素的id同步到父容器的自定义属性上，再用父容器的伪元素显示ID：

div[data-child-id]::before {
  content: attr(data-child-id);
  display: block;
  background: darkblue;
  color: white;
  padding: 8px;
}

对应的HTML结构示例：

<div data-child-id="user-input">
  <input type="text" id="user-input">
</div>

但这个方法需要手动同步属性，无法自动处理动态新增的元素。

2. JavaScript方案（适配动态页面） #

针对动态变化的页面，用MutationObserver监听DOM变动，自动给所有带id的元素（包括替换型元素）添加ID标识，无需手动维护：

// 给单个元素添加ID标签
function addIdLabel(el) {
  // 跳过已处理的元素
  if (el.dataset.idLabelAdded) return;
  
  const label = document.createElement('div');
  label.style.cssText = `
    display: block;
    background: darkblue;
    color: white;
    padding: 8px;
  `;
  label.textContent = el.id;
  
  // 把标签插到元素前方
  el.parentNode.insertBefore(label, el);
  el.dataset.idLabelAdded = 'true';
}

// 处理页面上已存在的带ID元素
document.querySelectorAll('[id]').forEach(addIdLabel);

// 监听DOM变化，自动处理新增元素
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      if (node.nodeType !== Node.ELEMENT_NODE) return;
      
      // 新增元素本身带ID则直接处理
      if (node.id) addIdLabel(node);
      // 遍历新增元素的子节点，处理带ID的元素
      node.querySelectorAll('[id]').forEach(addIdLabel);
    });
  });
});

// 启动监听，覆盖整个页面的DOM变动
observer.observe(document.body, {
  childList: true,
  subtree: true
});

这个脚本会自动处理所有新增的带id元素，不管是不是替换型控件，完全无需手动干预。

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