作者:希望全家人都幸福_870 | 来源:互联网 | 2023-05-25 13:12
nth-child
如果可能的话,我需要使用CSS3按顺序选择以下内容,但无法弄清楚如何...
70%宽度
1, 4, 5, 8, 9, 12, 13, 16, 17, 20
(+ 3 + 1R)
宽度30%
2, 3, 6, 7, 10, 11, 14, 15, 18, 19
(+ 1 + 3R)
我只能看到一种在序列中选择相同增量的方法(即1,5,9,13,17),所以想知道是否有人可以建议根据上述选择一些单一规则,或者我是否需要一些重叠规则根据需要覆盖.
1> Harry..:
使用nth-child(4n+0)
和nth-child(4n+1)
组合应选择所需的元素.
将通过上述组合选择1,4,5,8,9 ......,而另一个序列是剩余项目.因此,将30%宽度设置为默认值,并将所选nth-child
组合上的覆盖率设置为70%.
div{
background: green;
}
div:nth-child(4n+0),
div:nth-child(4n+1){
background: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20