前言
在开发中我们常常会会遇到列表相关的场景，比如说：卡片列表，导航栏等等。而在实现上，有一个问题需要我们去注意：如何给列表非首项元素添加样式，简单地来说就是一个列表中除第一个元素外其他元素赋予样式，比如：我想给一个导航栏的第一个导航项在左边，其他在右边，效果如下图片所示.
这个时候可能有人会说这实习起来不是很简单吗，根据优先级，使用id选择器给第一个元素赋予右浮动，其他元素使用class选择器赋予左浮动不就行了吗？
nonono，使用id选择器赋予样式本身就是一种错误的选择，严重扰乱优先级，可维护性极差。
这里我通过码上掘金给出导航栏的初始样式，导航项都在左侧，掘友可以通过下面地讲解来分别利用码上掘金来实验效果，下面开始我们的正题：使用伪类和选择符来优雅地为非首项元素添加样式。
伪类实现方案
可以结合两种伪类来处理这个问题，拆解一下非首项，非与首个，那么肯定会联想到:not()与:first这两个伪类
li:not(:first-child) { float: right; } 复制代码
如上，我们选中了li元素，通过选定非首个元素的形式来选中非首项，除此之外我们还可以分开处理
li { float: right; } li:first-child { float: left; } 复制代码
为所有的li元素赋予左浮动，再通过后来居上的原则，为首个元素设置右浮动
选择符实现方案
选择符实现方法包含了两种，利用随后兄弟选择符与相邻兄弟选择符实现。
随后兄弟选择符实现
随后兄弟选择符可以匹配某项后的所有兄弟元素，所以可以利用这个特性为首项后的样式赋予样式，给首个节点赋予一个class，通过class与兄弟属性结合使用，便成功实现。
.active ~ li { float: right; } 复制代码
下面再来看看另一个纯选择符实现——相邻兄弟选择符。
相邻兄弟选择符实现
相邻兄弟选择符选中的是目标元素向后相邻的兄弟元素，所以只能选择一个元素，那么这里就会有人问：“只能选中相邻的一个元素的话，如何做到为非首项后面的所有元素添加样式呢？”
li + li { float: right; } 复制代码
就如上面利用相邻兄弟选择器实现解释上面的疑问，其选中的是li元素的兄弟元素的第一个li元素，而除了首项外，其他所有的li元素都有前兄弟元素，所以就成功地实现了选中非首项元素。
引发的思考
掘友通过尝试上面这几种方法后肯定会发现一个问题，那就是元素顺序问题
正常情况下遵循文档流，由左至右，而上面方法会引起最后呈现的元素顺序与文档流不一致，这也是由浮动的特性造成的，流的特性很神奇，所有我们可以利用流的特性与CSS结合出意想不到的效果，视觉上元素的顺序往往与文档流中的元素顺序不同，符合我们的开发规范和UI设计就好了。
