CSS能否使用嵌套相邻兄弟选择器？如何移除连续的<div><br></div>元素？

嘿，这两个问题我来帮你梳理清楚：

首先得明确一点：CSS原生并不支持缩进式的嵌套语法（像Sass/Less那种写法），但相邻兄弟选择器（+）完全可以和后代选择器、子选择器等组合，在嵌套的DOM结构中灵活使用。

举个实际例子，假设你有这样的HTML结构：

<div class="article">
  <h2>文章标题</h2>
  <p>第一段内容</p>
  <p>第二段内容</p>
  <div class="sidebar">
    <span>标签A</span>
    <span>标签B</span>
  </div>
</div>

你可以用这些选择器精准选中相邻兄弟元素：

• .article p + p：选中.article容器里，紧跟在第一个<p>后的第二个<p>
• .sidebar span + span：选中.sidebar里，紧跟在第一个<span>后的第二个<span>

甚至像(.a + .b) + .c这种链式写法也是合法的，它能选中紧跟在.a + .b匹配元素之后的.c元素，本质上就是相邻兄弟选择器的组合嵌套使用。

先说明：纯CSS没法真正把元素从DOM中删除，但可以通过样式让它不可见且不占据布局空间，实现视觉上“移除”的效果。

方案一：使用:has()选择器（现代浏览器支持） #

:has()是CSS的父选择器，能帮你选中包含特定子元素的父元素。针对<div><br></div>这种结构，我们可以这样处理连续出现的情况：

/* 隐藏所有紧跟在同类型元素后的 <div><br></div> */
div:has(> br) + div:has(> br),
/* 处理3个及以上连续的情况 */
div:has(> br) ~ div:has(> br) {
  display: none;
}

/* 如果想把所有这类元素都隐藏，直接用下面这行即可 */
/* div:has(> br) { display: none; } */

注意：:has()目前支持Chrome、Firefox 121+、Safari等现代浏览器，如果项目需要兼容旧版浏览器，这个方案可能不适用。

无JS的兼容思路 #

如果没法用:has()，又不想写JS，最彻底的办法是从HTML源头入手——在输出内容时就过滤掉连续的<div><br></div>，毕竟CSS是样式层，处理DOM结构问题天生有局限。

可选的极简JS方案（兼容旧环境时） #

如果最终不得不妥协用JS，这里有个轻量实现，几乎不影响性能：

// 只移除仅包含单个br元素的div，避免误删其他内容
document.querySelectorAll('div > br:only-child').forEach(el => el.parentElement.remove());

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