通过纯 CSS 选择一对中的一个 元素答案

【问题标题】：Selecting one of the elements in a pair by pure CSS通过纯 CSS 选择一对中的一个 元素
【发布时间】：2016-10-31 15:30:07
【问题描述】：

有没有办法通过纯 CSS 选择一个元素，紧跟（或先于）另一个元素？

例如，将  中的一个隐藏在  对中：

<p>text text <br><br>text text <br>text text <br><br>text text</p>
<p>text text <br>text text <br><br>text text <br><br>text text</p>
<p>text text <br><br>text text <br>text text <br><br>text text</p>

并最终将其处理为：

<p>text text <br>text text <br>text text <br>text text</p>
<p>text text <br>text text <br>text text <br>text text</p>
<p>text text <br>text text <br>text text <br>text text</p>

display: none; 申请 br + br 或 br ~ br 不能按上述方式工作。

【问题讨论】：

br + br {display:none}，查看相邻的选择器
Adjacent selectors
css 不能删除元素，只能设置样式（例如隐藏或显示它们）

标签： html css css-selectors

【解决方案1】：

这里的问题是，唯一分隔 br 元素的是文本。 CSS 中的兄弟组合器会忽略元素之间的所有非元素节点，包括（但不限于）cmets、文本和空格，因此就 CSS 而言，您的所有段落都恰好有五个连续的 br 子节点：

<p>  <br><br>  <br>  <br><br>  </p>
<p>  <br>  <br><br>  <br><br>  </p>
<p>  <br><br>  <br>  <br><br>  </p>

也就是说，每个段落中第一个之后的每个br 都是br + br（以及扩展名also a br ~ br）。

您将需要使用 JavaScript 来迭代段落，找到紧跟在另一个 br 元素节点而不是文本节点之后或之前的 br 元素节点，然后删除所述其他节点。

var p = document.querySelectorAll('p');

for (var i = 0; i < p.length; i++) {
  var node = p[i].firstChild;

  while (node) {
    if (node.nodeName == 'BR' && node.nextSibling.nodeName == 'BR')
      p[i].removeChild(node.nextSibling);

    node = node.nextSibling;
  }
}

<p>text text <br><br>text text <br>text text <br><br>text text</p>
<p>text text <br>text text <br><br>text text <br><br>text text</p>
<p>text text <br><br>text text <br>text text <br><br>text text</p>

【讨论】：

【解决方案2】：

这可能不可靠，但至少在 Firefox 上有效：

br {
  display: block;
}

br {
  display: block;
}

<p>text text <br><br>text text <br>text text <br><br>text text</p>
<p>text text <br>text text <br><br>text text <br><br>text text</p>
<p>text text <br><br>text text <br>text text <br><br>text text</p>

【讨论】：

是的，这完全取决于浏览器如何选择实现 br 元素——那里没有共识。事实上，这只适用于 Firefox。