我有HTML标记,我无法改变。
示例
<p>
TEXT 1
<hr>some text
<hr>
<hr>TEXT 2
<hr>some text
</p>
我想删除紧跟在另一个hr
之后没有文字的任何hr
。正如您从下面的代码段中看到的那样,额外的hr
会导致双线。
我不认为这可以通过CSS实现。我尝试使用相邻(+)选择器,但意识到它显然不会工作。
我查看了使用jQuery :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 */
}
&#13;
<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>
&#13;
答案 0 :(得分:5)
您可以使用span
元素以编程方式包装文本节点,然后使用您建议的初始选择器hr
隐藏同级hr + hr
元素。在这样做时,将考虑文本节点,因为它们现在是span
个元素,并且相邻的hr
元素将被隐藏。
作为旁注,HTML无效,因为hr
元素不能嵌套在p
元素中。为了这个例子,我将p
元素替换为div
,但它仍然适用于p
元素,并且技术上不需要更改HTML。 / 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>
答案 1 :(得分:2)
您可以使用: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>