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

Question

有没有办法选择一个元素,紧跟在纯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>

display: none;申请br + br或br ~ 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(并且通过扩展也是abr ~ 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>