如何让 nth-of-type 模式像 1-2-2-1 一样工作?

罗伊·萨文

尝试使用以下模式为元素设置第 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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何像擦除2D向量中的元素一样擦除行

如何使mouseClicked像mousePressed一样工作

如何使HK2像Guice一样注入未明确配置的类?

如何使diff像git-diff一样工作?

如何获得像Instagram一样具有1:1比例的Android Camera2?

在Ang元素上像在Angular 1中一样引导Angular 2

如何像angular1一样更改Angular2 Material fab快速拨号动画

如何像React一样在Angular 2+中向下传递道具?

像pygame一样如何限制sdl2 fps

在什么情况下需要像python-opencv中的reshape(-1,1,2)一样重塑点?

熊猫df“ A”和“ B 1”是列名。如何像df.A一样引用“ B 1”?

Laravel / PHP如何在集合中查找值的序列(第1、2、3d,nth)

如何制作一个像1:n,1:(n-1),... 1:2、1这样的序列?

:nth-child(2)不起作用。:nth-child(1)和:nth-child(3)

假设我们有两个std :: vectors v1和v2,并且我们不想将它们组合到一个结构中。如何像按排序转换v1一样转换v2?

如何像PHP一样使用JS从SHA1获取原始输出?

如何使键盘像OSX System Wide一样工作?

如何在Zend 2中像Laravel一样返回视图

使用awk或sed打印最后的1,2,3..Nth或第一个1,2,3 ... Nth匹配的块模式

rEFInd是否像Grub2一样具有“恢复模式”

我想要具有5个值的HTML搜寻栏,当值显示image1时,也像值2显示image2一样

像瓦片地图生成一样的文明1

如何像C表一样在python中打印2d列表

angular2:如何像以前使用jQuery一样监视ajaxError?

1. 在 N 秒内将捕获的数据包保存到一个 pcap 文件中 & 2. 像 Wireshark 一样打印程序的输出

为什么 a = [1,2,3] 和 a[:] 不一样

Yarn 2 是否像 v1.x 一样支持 --offline 模式?

使用其嵌套字典删除多个键和值,然后像以前在 Python 中一样按照“0”、“1”、“2”、“3”的顺序排列键

如何删除嵌套字典中的键及其所有值,然后像以前在 Python 中一样按照“0”、“1”、“2”、“3”的顺序更改和排列键