0

我有一些这样的html结构：

<span class="foo">
  <a href="#" class="bar">text</a>
</span>

或者

<span class="foo">
  text
</span>

我需要做的是，替换span.fooif it has not child的内容a，但如果有则保留。

不幸的是，css 没有 has-child 或类似的选择器。这是我尝试过的：

.foo {
  visibility: hidden;
}

.foo:before {
  content: 'text-replaced';
  visiblity: visible;
  display: inline-block;
}

.foo a {
  margin-left : -10px;
  display: inline-block;
}

我使用 css text replace hack，并尝试将 childa与其父级重叠。问题是，a不会隐藏在跨度之上 - 它们都被显示，这很丑陋。而且我觉得这不是正确的方法——我不能真正硬编码 的值margin-left，因为里面的文本长度a是可变的。-10 只是一个例子，无论我使用什么数字，它都可以比实际需要的数字长或短。此外，有许多带有 的跨度class="foo"，每个跨度可能有也可能没有内部a标签 - 并且并非所有a都有相同长度的文本。这样做的正确方法是什么？我不能使用 javascript 来解决这类问题。

4

1 回答 1

1

我怀疑这是否可能以一种非常令人满意的方式实现。但是，您也许可以摆脱类似...

.foo { visibility: hidden; }
.foo > * { visibility: visible; }

这当然不理想，但它会隐藏 foo 但不会隐藏 foo 的孩子。

另一个蹩脚的技巧是使元素的文本透明，但它的孩子不是：

.foo { color:transparent; }
.foo > * { color:red; }

这是第一个概念的 jsfiddle，包括替换文本：http: //jsfiddle.net/EUG8h/。请注意，您将不得不接受不太理想的布局。您可以绝对定位替换文本以避免奇怪的空白空格，但是您需要确保 foo 至少与替换一样大（例如使用min-width）。这绝对是一个令人讨厌的 hack，而且它不会在所有情况下都有效。

于 2013-06-13T22:03:30.737 回答