Question

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

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

或

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

我需要做的是，如果span.foo没有孩子a，请替换.foo { visibility: hidden; } .foo:before { content: 'text-replaced'; visiblity: visible; display: inline-block; } .foo a { margin-left : -10px; display: inline-block; }的内容，但如果有，请将其保留。

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

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

Answer 1

我怀疑这是否可能以令人满意的方式进行。但是，你可能能够逃脱类似......

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

它肯定不理想，但它会隐藏foo而不是foo的孩子。

另一个蹩脚的黑客行为是让元素的文字透明，但它的孩子不是：

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

这是第一个概念的解决方案，包括替换文字：http://jsfiddle.net/EUG8h/。请注意，您必须接受较少的理想布局。您可以绝对定位替换文本以避免奇怪的空白空格，但是您需要确保foo至少与替换文件一样大（例如使用min-width）。这绝对是一个令人讨厌的黑客攻击，并且它无法在各种环境中发挥作用。

仅在有孩子的情况下更改内容

1 个答案: