Question

我有HTML标题和段落，如下所示：

<h2><br></h2>
<p><br></p>

如何使用纯CSS删除这些段落和标题？为了更加困难，我想删除包含仅  标记的父级。

例如，foo 不会被删除。

如果可能，我宁愿不使用JavaScript / jQuery。

编辑：搞砸了我将使用JS来解决这个问题。（我喜欢使用CSS而不是JS解决样式问题的想法，但我可以看到这有时是不可能的。）

Answer 1

你不能，你只能隐藏它。

br.hide {display: none}

我不知道你为什么要在纯粹的css中这样做，但你可以在加载或调用CSS时隐藏它。

Answer 2

这是不可能的，我能看到这个工作的唯一方法是使用兄弟和父css选择器的组合。

您可以选择兄弟选择器：css-tricks

不幸的是，它目前无法做父选择器，请参阅：stack overflow question

另一种方法是使用JavaScript，但你说你想用CSS做。

Answer 3

最大的问题是你不能根据CSS中的孩子来定位父母，所以这是不可能的......

既然您编辑了帖子并允许我们提供JS答案，那我就去了：

＆＃13;

var br = document.getElementsByTagName('br');
for (var i = 0; i < br.length; i++) {
  var parent = br[i].parentNode;
  if (parent.childNodes.length == 1) {
    parent.parentNode.removeChild(parent);
  }
}

＆＃13;

<p>Hello</p>
<p><br/></p>
<p>My name is slim<br/>shady</p>

＆＃13;

非常简单的东西，获取所有 元素，计算父母拥有的孩子数量（应该只有1， 本身）。从DOM中删除父级。

如果你喜欢用CSS隐藏它，你可以使用相同的逻辑来添加某个类，但我认为删除它会更好。

但请注意，如果身体中有很多 标签，它会变得非常沉重。

Answer 4

概括规则并允许您需要的内容为此行为添加范围，以便您可以限制此功能。

.scope br{
  display: none;
}

.scope p br {
  display: initial;
}

<div class="scope">
  <h2>Text inside h2 <br> without <br>  breaking  <br>  line</h2>
  <p>Text in p <br> with new line</p>
</div>

CSS删除仅包含<br/>的HTML元素

4 个答案: