使用CSS交换元素？ [英] Swap elements using CSS?

问题描述

我有相当简单的布局，如下：

I have fairly simple layout, like this:

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

它们之间用简单的 / code>。我想要实现的是当卡在特定区域时，攻击显示在底部，防御在顶部。我知道我可以使用jQuery，但是我可以使用纯CSS实现相同的效果。

They're arranged on top of each other with simple display: block. What I want to achieve is when a card is in specific areas, "attack" shows on bottom and "defence" is on top. I know I can make it with jQuery, but can I achieve the same effect using pure CSS?

推荐答案

技术上，这是一个业务规则的事情，这不是你的化妆品层的领域。

Technically, this is a business rules thing, which is not the domain of your cosmetic layer.

在HTML文档中，从头到尾的元素顺序具有语义意义 - 您的情况没有不同，我怀疑您在尝试指出一些差异在一个元素到下一个元素的重要性（在文档中，不仅仅是可视化表示），取决于上下文。

In an HTML document, the order of elements from first to last has semantic meaning - your case is not different, I suspect, in that you are trying to indicate some difference in importance from one element to the next (in the document, not just the visual representation) depending on the context.

所以你的方法应该是JQuery，或者一些其他方法来改变这两个元素在文档中的顺序的关系的意义。 CSS只打算改变它们的装饰外观。

So your approach should be JQuery, or some other method of changing the meaning of the relationship of these two elements in terms of their order in the document. CSS is intended to change only their cosmetic appearance.

对于这样的情况，可能有助于认为，如果有人看不到元素，依靠屏幕阅读器按他们出现在文档中的顺序阅读它们？这些信息（不仅是两个元素的内容，而且它们的关系）仍然是正确和可理解的？

With situations like this, it can be helpful to think, "what if someone could not see the elements, and had to rely on a screen reader to read them in the order they appear in the document? Would this information (not just the content of the two elements, but their relationship) still be correct and comprehensible?"

你可能不希望盲人可以访问这些内容，但这对于如何处理这样的问题通常是一个很好的理性检查。

You may not intend for this to be accessible to the blind, but that's often a good sanity check for how to approach a problem like this.

这篇关于使用CSS交换元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！