文章/答案/技术大牛

发布

社区首页 >问答首页 >如何删除紧跟在<hr>之后的<hr>？

问如何删除紧跟在<hr>之后的<hr>？
EN

Stack Overflow用户

提问于 2017-01-30 15:35:32

回答 2查看 1.2K关注 0票数 5

我有无法更改的HTML标记。

示例

<p>
  TEXT 1
  <hr>some text
  <hr>
  <hr>TEXT 2
  <hr>some text
</p>

我想删除任何在没有文本的情况下立即跟随另一个hr的hr。从下面的片段中可以看到，额外的hr导致了双行。

我认为CSS不可能做到这一点。我试着使用相邻的(+)选择器，但意识到它显然行不通。

我看过使用:empty，但由于hr是自闭的，所以很难找到目标。

如有任何建议，我将不胜感激。

片段

body {
  width: 500px;
  margin: 0 auto;
}
hr {
  border-top: 3px solid #CCC;
  border-bottom: none;
  color: #CCC
}
hr + hr {
  /* display: none; // doesn't work */
}

<p>
  TEXT 1
  <hr>some text
  <hr>some more text
  <hr>even more text
  <hr>
  <hr>TEXT 2
  <hr>some text
  <hr>some more text
  <hr>even more text
</p>

javascript

jquery

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-01-30 15:51:54

您可以用span元素对文本节点进行编程包装，然后使用您建议的初始选择器hr + hr隐藏同级hr元素。在这样做时，文本节点将被考虑，因为它们现在是span元素，而相邻的hr元素将被隐藏。

另外，由于hr元素不能嵌套在p元素中，所以HTML是无效的。为了这个例子，我用一个p元素替换了div元素，但是它仍然可以使用p元素，而且技术上也不必更改。

$('.parent-element').contents().filter(function() {
  return this.nodeType === 3 && this.textContent.trim() !== '';
}).wrap('<span/>');

hr {
  border-top: 3px solid #CCC;
  border-bottom: none;
  color: #CCC
}
hr + hr {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="parent-element">
  TEXT 1
  <hr>some text
  <hr>some more text
  <hr>even more text
  <hr>
  <hr>TEXT 2
  <hr>some text
  <hr>some more text
  <hr>even more text
</div>

票数 5

Stack Overflow用户

发布于 2017-01-30 15:45:45

您可以使用:nth-child()选择器。所以，在您的例子中，您需要使用:nth-child(even)

body {
  width: 500px;
  margin: 0 auto;
}
hr {
  border-top: 3px solid #CCC;
  border-bottom: none;
  color: #CCC
}
hr:nth-child(even) {
  display: none;
}

<p>
  TEXT 1
  <hr>some text
  <hr>some more text
  <hr>even more text
  <hr>
  <hr>TEXT 2
  <hr>some text
  <hr>some more text
  <hr>even more text
</p>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41939741

复制

相似问题

问如何删除紧跟在<hr>之后的<hr>？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何删除紧跟在<hr>之后的<hr>？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何删除紧跟在<hr>之后的<hr>？
EN