如何使用CSS选择器定位p标签内成对出现的br标签中的最后一个？

Question

我希望规范化一些文本中换行和段落之间的间距。

为此，我希望折叠所有换行符，使它们本身不产生高度，并在连续出现两个<br>标记的最后一个标记上添加margin-bottom。

是否有css选择器可以让我选择在<p>内成对出现的<br>标记中的最后一个标记？

<p>
   Some text<br />
   Some more text<br /><br /> <!-- I wan't to target the last of these -->
   Even more text<br /> <!-- Not this one -->
</p>

我尝试了以下选择器，但没有成功。似乎+选择器忽略了文本并变得过于贪婪。

p br {
    line-height: 0;
    height:0;
    margin:0;
    padding:0;
    content: " ";
    display: block;
}

p br + br {
    margin-bottom: 1em;
}

一个例子：http://jsfiddle.net/jqcyc/ 这个标记是否可以实现，最好不使用任何Javascript？

- alexbech

Answer 1

原始文本在某种程度上对CSS选择器来说是不可见的。根据您的HTML，CSS将其视为：

<p>
    <br />
    <br /><br /> <!-- I wan't to target the last of these -->
    <br /> <!-- Not this one -->
</p>

所以每个<br />除了第一个之外都与p br + br选择器匹配。在您采用原始CSS的方式中没有解决问题的方法。JavaScript或服务器端（无论您使用的是哪种语言 - PHP、Java等）是其他方法。

- matewka

Answer 2

如果你的 br 标签数量总是相同的，可以使用 br:nth-child(n) 选择它们。

例如：br:nth-child(2){ height:12345px; }

- Albzi

Answer 3

没有纯CSS的解决办法。但是你可以给想要选择的<br />元素添加一个类（避免使用两个连续的br）。这是在jsfiddle中的链接http://jsfiddle.net/jqcyc/5/。

- Joaquín O