选择< br>元素在一个纯的CSS [英] Selecting one of the <br> elements in a pair by pure CSS

问题描述

有没有办法选择一个元素，紧接着（或之前）纯CSS的其他元素？

Is there a way to select one element, immediately following (or preceding) other by pure CSS?

例如，隐藏 < br> 中的< br> ：

Foe example, hide one of <br> in a <br><br> pair:

<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; c $ c> br + br 或 br〜br 不如上所述工作。

display: none; appled for br + br or br ~ br don't work as described above.

推荐答案

这里的问题是，分隔您的 br 元素的唯一的事情是文本。 CSS中的同级组合器忽略元素之间的所有非元素节点，包括（但不限于）注释，文本和空格，对于CSS，所有的段落都有五个连续的 br 每个孩子：

The problem here is that the only thing separating your br elements is text. Sibling combinators in CSS ignore all non-element nodes between elements including (but not limited to) comments, text and whitespace, so as far as CSS is concerned, all of your paragraphs have exactly five consecutive br children each:

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

That is, every br after the first in each paragraph is a br + br (and by extension also a br ~ br).

您将需要使用JavaScript来迭代段落，找到紧跟其后或之前有另一个的元素节点 br

You will need to use JavaScript to iterate the paragraphs, find br element nodes that are immediately followed or preceded by another br element node rather than a text node, and remove said other node.

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>

这篇关于选择&lt; br&gt;元素在一个纯的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！