出乎意料的伪类选择器结果 :nth-child
本帖最后由 ing 于 2020-6-25 20:01 编辑为什么结果不是只有第27和54个元素的下边框线变粗？
(n:1)3，(n:2)6，(n:3)9，(n:4)12，(n:5)15... 这样的理解方法在这却是可行的，产生的效果也是预计的
为什么这的 n 取值在0~2，而不是0~满足3n<81的整数
https://codesandbox.io/s/pedantic-jackson-fzmmp?file=/index.html
总结__________________________________________________________________________________________________________
n的取值并不是0~2，只是设置为3n的时候刚刚好每一个元素的横坐标位置都是一样的，设为2n立刻看出区别
(n:1)3，(n:2)6，(n:3)9，(n:4)12，(n:5)15 这个是正确的理解
27n 那里确实是只有第27和54个元素的下边框线变粗，影响一整行的原因是justify-content 属性定义了浏览器之间，如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间
/* 均匀排列每个元素，每个元素周围分配相同的空间 */
justify-content: space-around;
css属性如果没有设置width和height而是使用padding，那么将会导致justify-content 属性失效，只有第27和54个元素的下边框线变粗
ing 发表于 2020-6-25 14:16
我是不理解这个结果的产生，:nth-child(27n)
为什么不是只有第27和54个元素的下边框线变粗？
你可以理解为，天塌下来有高个的顶着..你设置的是27和54，但是他们同一行的高度都被他“撑”起来了，
没有任何问题，加个颜色你就看出来了
color: red;
你即便单独设置一个元素的 margin-bottom，同一行的也会被"撑"起来
<div class="cell" style=" margin-bottom: 0;"> 6</div>
本帖最后由 kittylang 于 2020-6-25 14:21 编辑
伪类没有问题,没达到效果是因为css属性使用不恰当的原因
https://attach.52pojie.cn//forum/202006/25/142105awl2mkupm2zcl8qg.png?l 传说中的五号 发表于 2020-6-25 13:49
没有任何问题，加个颜色你就看出来了
你即便单独设置 ...
我是不理解这个结果的产生，:nth-child(27n){:1_924:}
为什么不是只有第27和54个元素的下边框线变粗？ 传说中的五号 发表于 2020-6-25 14:21
你可以理解为，天塌下来有高个的顶着..你设置的是27和54，但是他们同一行的高度都被他“撑”起来了，
好的，懂了，我以为是只有单个元素会受影响原来这是一整行 本帖最后由 ing 于 2020-6-25 14:50 编辑
传说中的五号 发表于 2020-6-25 13:49
没有任何问题，加个颜色你就看出来了
你即便单独设置 ...
突然想起，我还有最后一个问题
:nth-child(3n)
为什么 n 取值在 0~2 而不是满足 3n<81 的整数 n 的范围?
ing 发表于 2020-6-25 14:29
突然想起，我还有最后一个问题
:nth-child(3n)
为什么 n 取值在 0~2 而不是满足 3n
因为你设置的是margin-right，而3能被9整除，所以看起来像是在一列，实际上不是，，你设置成4n，就能看出区别了
页:
[1]