尝试使用以下模式为元素设置第 n 个类型的样式:1-2-2-1。
例如,它需要如下所示:
蓝红
红蓝
蓝红
红蓝
蓝红
红蓝
我在 1 个容器中设置了很多链接,我试图将它分成 2 列并以交替颜色设计(如此处的红蓝列表所示)。
我试图搞乱 nth-of-type,但无法弄清楚,现在,我正在使用这样的东西:
.post-link:nth-of-type(2) {code...}
.post-link:nth-of-type(3) {code...}
.post-link:nth-of-type(6) {code...}
.post-link:nth-of-type(7) {code...}
.post-link:nth-of-type(10) {code...}
.post-link:nth-of-type(11) {code...}
但是这种手动方法只带我到这里为止,链接一直被添加到页面中,我需要它在不为每个框设置特定规则的情况下工作。
我也尝试过这样的事情,但没有成功:
.post-link {background: #3c6d84;}
.post-link:nth-of-type(2n) {background: #fe7625;}
.post-link:nth-of-type(3n) {background: #fe7625;}
试图获得如上所述的正确模式。
它应该看起来像
.post-link::not(:nth-child(4n + 1)):not(:nth-child(4n + 4))
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句