通过纯 CSS 选择一对中的 <br> 元素之一

Answer 1

这里的问题是，唯一分隔

br

元素的是文本。 CSS 中的同级组合器会忽略元素之间的所有非元素节点，包括（但不限于）注释、文本和空格，因此就 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

（并且通过扩展也是一个

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>

Answer 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>

Answer 3

我从一位同事的代码中发现的另一个解决方案是将

content: ""

添加到

br

（也必须在

display: block

中）。我不完全确定它是如何工作的，但它确实在内部文本之间呈现连续的

br

。问题是这不适用于 Safari。