Question

我为某些元素设置了margin：

button {
  margin: 10px 10px 0 0;
}

a {
  margin: 10px 20px 0 0;
}

现在，每当我float: right任何这些元素时，我都想为第一个右浮动元素设置margin-right: 0。如下所示：

.float-right {
  float: right;
  /* only for first instance */ margin-right: 0;
}

有什么选择吗？

一些限制：

我对不同的元素有不同的边距，我希望.float-right类是通用的，所以我不能将margin-right: 0设置为类，然后为其他实例设置边距 - 浮动元素（.float-right ~ .float-right）。
在我的情况下，将元素包装到容器中是不切实际的，所以我可以简单地使用:first-child伪选择器。

下面是一个简单的示例，其中我有一个徽标<a>和一个登录<a> - 后者是浮动的，它不是<a>类型的第一个元素，我需要margin-right为0。

＆＃13;

a {
  margin-right: 50px;
}

.float-right {
  float: right;
}

.float-right:first-child {
  margin-right: 0;
}

＆＃13;

<a href="">LOGO</a>
<a href="" class="float-right">Login | Register</a>

＆＃13;

Answer 1

你真正要求的是first-of-class，但目前尚不存在。

但是，您可以使用一个类来定位第一个元素，该类紧跟在具有:not() seelctor和直接兄弟选择器的类之后。

如下：

a {
  margin-right: 50px;
}
.float-right {
  float: right;
}
*:not(.float-right) + .float-right {
  margin-right: 0;
}

<a href="">LOGO</a>
<a href="" class="float-right">Login | Register</a>

这并不理想，因为它在很大程度上无法真正扩展，但它确实为您的特定要求提供了解决方案。

Answer 2

如果您不介意使用jQuery解决方案，可以尝试使用jQuery的.first（）来获取文档中的第一个.float-right元素：

$("body").find(".float-right").first().css("margin-right","0");

给定一个表示一组DOM元素的jQuery对象，.first（）方法从该集合中的第一个元素构造一个新的jQuery对象。您可以在此处详细了解：https://api.jquery.com/first/

我为你创建了一个jsFiddle来说明 - https://jsfiddle.net/0ccb36mz/

Answer 3

请尝试这样：

.float-right:first-child{
   margin-right: 0;
}