Question

我需要删除此div中的所有文本，同时保留＆lt; a＆gt;中的任何内容。

<div class="footer">
  Lorem ipsum etc etc etc... <img src="trash.png"> <img src="garbage.jpg">
  <a href="something.html">Somewhere</a>
  ... blah blah <em>blah</em> blah ...
  <a href="anotherlink.html>Another Link</a>
  ... in conclusion earthworms are interesting.
</div>

然而，当我使用它时：

.footer :not(a)
{
display: none;
}

文字仍然存在。

我只能使用CSS，因为它是一个用户风格。这可能吗？

Answer 1

由于您无法选择文本节点，因此一个选项是将父元素的font-size设置为0，然后为font-size重新指定a .footer { font-size: 0; } .footer :not(a) { display: none; } .footer a { font-size: 16px; }元素。

Example Here

.footer {
    font-size: 0;
}
.footer :not(a) {
    display: none;
}
.footer a {
    font-size: 16px;
}

＆＃13;

<div class="footer">
  Lorem ipsum etc etc etc... <img src="trash.png"/> <img src="garbage.jpg"/>
  <a href="something.html">Somewhere</a>
  ... text nodes.. text nodes <strong>text nodes</strong>
  <a href="anotherlink.html">Another Link</a>
  ... some other text node
</div>

＆＃13;

font-size

＆＃13;

不幸的是，此方法的缺点是，您将无法使用相对a单位设置em元素的visibility。

作为旁注，值得一提的是，您还可以将父footer元素的hidden设置为visibility，然后设置a将visible个元素添加到display: none。

Updated Example

这显然没有达到与display: block / .footer { visibility: hidden; } .footer a { visibility: visible; }相同的效果，但尽管如此，我认为值得指出。

.footer {
    visibility: hidden;
}
.footer a {
    visibility: visible;
}

＆＃13;

<div class="footer">
  Lorem ipsum etc etc etc... <img src="trash.png"/> <img src="garbage.jpg"/>
  <a href="something.html">Somewhere</a>
  ... text nodes.. text nodes <strong>text nodes</strong>
  <a href="anotherlink.html">Another Link</a>
  ... some other text node
</div>

＆＃13;

{{1}}

＆＃13;

Answer 2

尝试：

.show {
   display: block !important;
}

.hide {
   display: none;
}

并将show class应用于所有标记并隐藏到div。

是否可以显示：没有标签中没有的文字？

2 个答案: