根据兄弟元素的数量范围来匹配元素
根据兄弟元素的数量范围来匹配元素
: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之后就会有一个完美的圆。
而且我使用了相对定位和绝对定位,其实上为布局增加了迷惑性和难度。