CSS中类似flex的状态/一次抓取多个id元素

假设我有一个带有按钮的ui。ui有四种状态，每个状态的按钮位于不同的角落

在Flex中，这很容易实现，只需定义这四个状态（topLeft、topRight、bottomRight、bottomLeft），每个状态都有一个按钮位置值的覆盖

您将如何使用CSS以一种可以通过简单赋值触发的方式来实现这一点

Flex:skin.currentState=“topRight” JS:

我已经在css中定义了类：

#button.topRight {...}
#button.topLeft{...}
#button.bottomRight {...}
#button.bottomLeft {...}

现在，在不必知道#按钮存在的情况下，如何在一行代码中将四种状态中的一种应用于页面上定义了该状态的所有元素？

提供了一个方便的JavaScript抽象层，以便：

$('.someClassName').addClass('blueOnLeft')  
$('.someClassName').removeClass('blueOnLeft')

---

这将针对类名为“someClassName”的每个元素。

请显示相关的HTML。这很容易做到-只需要知道标记结构。很好知道。但是如果我有五个不同的状态，元素当前可能是这五个状态中的任何一个，并且可能需要转到这五个状态中的任何一个呢？我希望能在一行中做出改变。这在CSS中可能吗？是的，您可以使用：.addClass（'blueOnLeft mysomething'）等。。。看：知道也很好。我可以使用removeClass更改项的“状态：$（“p”）.removeClass（“state1 state2”）.addClass（“state3”）。现在，如果有什么方法我可以说：一个页面上的所有id元素，如果你定义了一个类X，添加一个类并删除所有其他类？当然，你可以使用没有CSS定义的类来表示你想要的任何东西。谢谢Diodeus，你所有的评论都在帮助我，因为我对CSS的知识还很初级。我把问题重新写了一遍，让它更清楚。