根据兄弟元素的数量范围来匹配元素

根据兄弟元素的数量范围来匹配元素

:nth-child()

这个方法的参数不仅仅是数字，还可以是表达式

:nth-child(2n+1)

n+b这种形式的表达式，可以选中从b个开始的所有子元素。
例如
:nth-child(n+4)
将会选中除了第一、二、三个子元素之外的所有子元素。

li:first-child:nth-last-child(n+4),
li:first-child: nth-last-child(n+4) ~ li {
当列表至少包含四项时，命中所有列表项
}

-n+b这种形式的表达式可以选中开头的b个元素。

因此，仅当列表中有四个或者更少的列表项时，要选中所有的列表项可以这样写：

li:first-child:nth-last-child(-n+4),
li:first-child:nth-last-child(-n+4) ~ li {
当列表最多包含四项时，命中所有列表项
}

demo-38分析
这个demo好在哪里呢？和我自己的思路相比

首先，我在整体布局时并没有把所有组件中的内容写进去，而是写一点添加一点，不需要的组件里就不添加，比如说
delete🔘按钮，我只在需要的组件中添加，不需要的不添加
这样造成的问题是 我的页面是死的。

demo中，人家把所有内容展示在页面上，不需要的就display为none;
而且文字内容的隐藏和巧妙
把color设置为 transparent,把font-size设置为0

然后两个按钮的设置不是flex布局放在一起的，而是各有一个类，包裹在父级元素中，然后它们各自左右浮动。

我想的是flex布局，然后等间距，即使用justify-content:flex-around或者flex-space来调整。

还有一点比较好的是：
代码量比我少
其中，在两个按钮实现时，只有按钮里的符号不同颜色不同。

我都是在各自的类上再使用before伪元素

没想到demo中的实现是：
先before写出按钮的布局，然后再各自的before和类来控制color和content。
按钮布局时我遇到的问题是，如何实现一个完美的圆，border-radius：50% 并没有达到想要的效果，因为文字的
上下边距实际上比左右的大，我只好调整左右边距来实现这些，这实际上是强行怼出来的，只要content一变，布局又得重写。
非好的方案。
为了解决宽高不一致的问题，demo中设定了宽度和行高,这样border-radius之后就会有一个完美的圆。

而且我使用了相对定位和绝对定位，其实上为布局增加了迷惑性和难度。