使用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旨在仅改变其外观.

在这样的情况下,思考"如果有人看不到元素,并且不得不依赖屏幕阅读器按照它们在文档中出现的顺序阅读它们会有什么帮助？这些信息(不仅仅是内容)这两个元素,但他们的关系)仍然是正确和可理解的？"

您可能无意让盲人可以访问此内容,但这通常是对如何处理此类问题的良好理智检查.