Question

鉴于我无法更改的Xml，是否可以只使用一个css文件获得条件结果。我现在只能有一个css，但是根据我的理解，css在条件方面非常有限。

案例1：

<doc>
<story>
<c1><p><text-web-group class="MajorEvent"><text-web class="MajorEvent">Sample Text C1</text-web></text-web-group></p></c1>
</story>
</doc>

案例2：

<doc>
<story>
<c1><p><text-web-group class="MajorEvent"><text-web class="MajorEvent">Sample Text C1</text-web></text-web-group></p></c1>
<c2><p><text-web-group class="MajorEvent"><text-web class="MajorEvent">Sample Text C2</text-web></text-web-group></p></c2>
</story>
</doc>

案例3

<doc>
<story>
<c2><p><text-web-group class="MajorEvent"><text-web class="MajorEvent">Sample Text C2</text-web></text-web-group></p></c2>
</story>
</doc>

案例1.如果仅在C1 / p / text-web-group / text-web

示例文本C1

案例2.如果C1 / p / text-web-group / text-web和C2 / p / text-web-group /中都有文本，则仅显示样本文本C1 文本的Web
案例3.如果仅在C2 / p / text-web-group / text-web

示例文本C2

Answer 1

是的，只有CSS才有办法。根据您的解释，您可以使用以下CSS：

story > *:first-child + * > p > text-web-group{
    display: none;
}

Working Fiddle （更改html以检查）

PS：如果您有更多标签，例如c1，c2，c3等兄弟姐妹，请使用~（兄弟选择器）代替上述代码中的+（相邻选择器）。

注意：正如我所做的那样effect the performance使用通用选择器 *。但不在modern browsers。

Answer 2

目前的CSS规范不允许您按照自己的意愿行事。

遗憾的是，XML的组织方式不允许您使用伪类:empty来设置（隐藏）“Sample Text C ...”。

此外，您还需要定位父母隐藏<c1>或<c2>，某些内容（可能）会出现在CSS Selectors Level 4中，但今天在任何浏览器中都无法显示。

使用Css显示某些条件的文本

2 个答案: