如何使用CSS根据ptb_sold内容隐藏相邻注册按钮DIV

你的CSS逻辑完全写反，同时存在选择器匹配规则的认知偏差：

• div.ptb_sold:empty匹配的是内部无任何子元素、无任何文本节点的空.ptb_sold，也就是你说的第二种未售场景，你给这个场景下的按钮加display: none，刚好和预期效果相反。
• 带Sold标识的.ptb_sold内部存在span子元素，本身就不符合:empty的匹配规则，所以第一种已售场景下你的代码根本不会命中。
• 额外注意：:empty对缩进、换行带来的空白文本节点非常敏感，哪怕标签里只有一个换行空格，都不会被判定为空，实际开发中很容易因为代码格式问题失效。

方案1：纯CSS实现（适配绝大多数现代浏览器） #

使用:has()伪类实现父元素对子元素的条件匹配，这是目前最简洁的纯CSS方案，兼容Chrome 105+、Firefox 121+、Safari 15.4+及以上版本的浏览器，覆盖95%以上的现役用户浏览器：

/* 当.ptb_sold内部存在Sold标识的.ptb_one_line元素时，隐藏相邻的注册按钮 */
.ptb_sold:has(.ptb_one_line) + .ptb_link_button {
  display: none;
}

这个选择器完全匹配你的两个业务场景：

• 第一种已售场景：.ptb_sold内存在带Sold文本的span，命中规则，按钮隐藏
• 第二种未售场景：.ptb_sold为空，不命中规则，按钮正常显示

方案2：JS实现（全版本浏览器兼容） #

如果需要兼容不支持:has()的老旧浏览器，可以用少量JS遍历节点判断，兼容性拉满，同时不受DOM结构细节、代码缩进影响：

// 遍历所有已售标识节点
document.querySelectorAll('.ptb_sold').forEach(soldNode => {
  // 判断节点内是否存在Sold标识（支持子元素包裹、直接文本两种写法）
  const hasSoldMark = soldNode.textContent.trim() === 'Sold' || soldNode.querySelector('.ptb_one_line');
  if (hasSoldMark) {
    const adjacentBtn = soldNode.nextElementSibling;
    // 相邻节点是注册按钮的话直接隐藏
    if (adjacentBtn?.classList.contains('ptb_link_button')) {
      adjacentBtn.style.display = 'none';
    }
  }
})

如果你的页面是动态渲染商品内容，只需要在DOM渲染完成后再执行这段代码即可。

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