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

Question

有没有办法 select 一个元素，紧跟在另一个元素之后（或之前）纯 CSS？

敌人的例子，在 <br><br> 对中隐藏 <br> 之一：

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

为 br + br 或 br ~ br 申请的

display: none; 如上所述无效。

Answer 1

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

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

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>

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

Selecting one of the <br> elements in a pair by pure CSS

html

css

css-selectors