使用 Css 显示特定条件下的文本答案

【问题标题】：Using Css to display text for certain conditions使用 Css 显示特定条件下的文本
【发布时间】：2014-10-03 21:43:03
【问题描述】：

鉴于下面我无法更改的 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>

CASE 1. Sample Text C1 仅在 C1/p/text-web-group/text-web 中有文本时显示
CASE 2. 如果 C1/p/text-web-group/text-web 和 C2/p/text-web-group/ 中都有文本，则仅显示 Sample Text C1文字网
CASE 3. Sample Text C2 仅在 C2/p/text-web-group/text-web 中有文本时显示

【问题讨论】：

那么你的问题是什么？
当前的 CSS 规范不允许你做你想做的事。您的 XML 组织方式不允许您使用 :empty 设置样式，并且您需要定位父对象，CSS Selectors Level 4 中的某些东西（可能）在今天没有浏览器可用。
@LeBen，你应该这样回答。

标签： html css xml

【解决方案1】：

是的，有一种方法只使用 CSS。根据您的解释，您可以使用以下 CSS：

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

Working Fiddle（更改 html 以检查）

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

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

【讨论】：

毫无疑问可以正常工作，但是如果故事和c1之间有不同的标签，你会有解决方案吗？
@jay.james.666 如果你知道深度，那么你可以像我上面那样使用>。如果你不知道深度，那么 CSS 是不可能的。

【解决方案2】：

当前的 CSS 规范不允许你做你想做的事。

遗憾的是，您的 XML 组织方式不允许您使用伪类 :empty 来设置（隐藏）“示例文本 C…”的样式。

此外，您还需要将目标父母隐藏 <c1> 或 <c2>，CSS Selectors Level 4 中（可能）会出现某些内容，但目前在任何浏览器中都不可用。

【讨论】：