css - 使用 CSS 交换元素？

Question

我有相当简单的布局，像这样:

<div class="card">
    <span class="attack">1</div>
    <span class="defence">2</div>
</div>

它们通过简单的 display: block 排列在彼此之上。我想要实现的是当一张牌在特定区域时，“攻击”显示在底部，“防御”显示在顶部。我知道我可以用 jQuery 实现，但我可以使用纯 CSS 实现同样的效果吗？

Answer 1

从技术上讲，这是一个业务规则的事情，它不是你的装饰层的领域。

在 HTML 文档中，元素从第一个到最后一个的顺序具有语义意义——我怀疑你的情况没有什么不同，因为你试图表明一个元素到下一个元素在重要性上的一些差异(在文档中，而不仅仅是视觉表示)取决于上下文。

因此，您的方法应该是 JQuery，或根据文档中这两个元素的顺序更改这两个元素关系含义的其他方法。 CSS 旨在仅更改它们的外观。

在这种情况下，思考“如果有人看不到这些元素，不得不依靠屏幕阅读器按照它们在文档中出现的顺序阅读它们会怎样？这些信息(不是只是两个元素的内容，但它们的关系)仍然是正确和可理解的吗？”

您可能不打算让盲人可以访问此内容，但这通常是对如何处理此类问题的良好健全性检查。