css - 第一个向右浮动的元素

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 .

a {
  margin-right: 50px;
}

.float-right {
  float: right;
}

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

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

Answer 1

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

但是，您可以使用 :not() 选择器和直接同级选择器将第一个具有类的元素作为紧跟在没有该类的元素之后的元素。

如下:

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>

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