html - 仅在有子内容时更改内容

Question

我有一些像这样的 html 结构:

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

或

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

我需要做的是，如果 span.foo 没有子 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 文本替换 hack，并尝试让子 a 与其父元素重叠。问题是，a 没有隐藏在 span 之上——它们都被显示了，这很丑陋。而且我觉得这不是正确的方法 - 我不能真正硬编码 margin-left 的值，因为 a 中的文本长度是多变的。 -10 只是一个例子，无论我使用什么数字，它都可以比实际需要的数字长或短。此外，有许多带有 class="foo" 的 span，每个 span 可能有也可能没有内部 a 标签——并非所有的 a有等长的文本。这样做的正确方法是什么？对于此类问题，我无法使用 javascript。

Answer 1

我怀疑这能否以一种非常令人满意的方式实现。但是，您可能能够逃脱诸如...

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

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

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

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

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