html - 使用 Css 显示特定条件下的文本

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>

• CASE 1. 如果只有 C1/p/text-web-group/text-web 中有文本，则显示 Sample Text C1
• CASE 2. 如果 C1/p/text-web-group/text-web 和 C2/p/text-web-group/中都有文本，则只显示 Sample Text C1文本网络
• 案例 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 等，那么使用~ (sibling selector) 而不是上面代码中的 + (adjacent selector)。

注意:使用通用选择器 *，就像我所做的一样 effect the performance .不在 modern browsers虽然。