出乎意料的伪类选择器结果 :nth-child

ing

为什么结果不是只有第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，但是他们同一行的高度都被他“撑”起来了，

传说中的五号

没有任何问题，加个颜色你就看出来了

[CSS] 纯文本查看 复制代码

color: red;

你即便单独设置一个元素的 margin-bottom，同一行的也会被"撑"起来

[HTML] 纯文本查看 复制代码

<div class="cell" style=" margin-bottom: 0;"> 6</div>

kittylang

伪类没有问题,没达到效果是因为css属性使用不恰当的原因

ing

传说中的五号 发表于 2020-6-25 13:49
没有任何问题，加个颜色你就看出来了

你即便单独设置 ...

我是不理解这个结果的产生，:nth-child(27n)
为什么不是只有第27和54个元素的下边框线变粗？

ing

传说中的五号 发表于 2020-6-25 14:21
你可以理解为，天塌下来有高个的顶着..你设置的是27和54，但是他们同一行的高度都被他“撑”起来了，

好的，懂了，我以为是只有单个元素会受影响原来这是一整行

ing

传说中的五号 发表于 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，就能看出区别了