第一个元素右

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>

这不是理想的，因为它不是真正扩展到一个大的程度，但它确实提供了一个解决方案，您的具体要求。

Answer 2

请尝试这样的：

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

Answer 3

如果你不介意一个jQuery的解决方案，您可以尝试使用jQuery的。首先（）让你的文档中的第一.float右元素：

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

如果提供的jQuery代表一组DOM元素，.first（）方法从该集合中的第一个元素构造一个新的jQuery对象。你可以阅读更多关于它在这里：https://api.jquery.com/first/

我创建了一个的jsfiddle为您说明 - https://jsfiddle.net/0ccb36mz/