问题描述
我有一个列表的div元素,我目前显示在两列使用CSS浮动。我想交替这些元素的边框颜色。我使用交替引号,因为我真正想要的是每个行中的两个div交替。下面是我想要的最终状态示例:
1blue 2green
3green 4blue
6green
7green 8blue
如果我只是使用nth-child (odd)我在每一列垂直像相同的颜色:
1blue 2green
3blue 4green
5blue 6green
7blue 8green
我想要定位的div位于WordPress循环中我没有很多控制的标记(这就是为什么我希望使用CSS的第n个孩子)。不幸的是,没有任何标记可以让我针对每个单独的行。
有任何一种nth-child模式,对于不定数量的项目,如 blue [1],green [2],blue [2]等等
n
的倍数的公式。 请注意,在右栏中您有 4
和 8
(下一个是 12
),因此您需要每个第4个元素,而在左侧有 1
5
(接下来会是 9
),因此您还需要第四加一(技术上 4 * 0 + 1
)。
,但相关代码是:
/ *颜色一切绿色* /
.checkerboard div {
width:45%;
display:inline-block;
background-color:green;
}
/ *然后颜色适当的divs蓝色* /
.checkerboard div:nth-child(4n + 1),
.checkerboard div: child(4n){
background-color:blue;
}
并提供:
I have a list of div elements that I'm currently displaying in two columns using CSS float. I would like to "alternate" the border color of these elements. I used alternate in quotes because what I really want is for the two divs in each "row" to alternate. Below is an example of what I want as my end state:
1blue 2green
3green 4blue
5blue 6green
7green 8blue
If I simply use nth-child(even) or nth-child(odd) I get the same color in each column vertically like:
1blue 2green
3blue 4green
5blue 6green
7blue 8green
The divs I want to target are located inside a WordPress loop so I don't have a lot of control over the markup (which is why I was hoping to use CSS nth-child). Unfortunately there isn't any markup that would allow me to target each individual "row".
Is there any kind of nth-child pattern that would allow me to do something like blue[1], green[2],blue[2],etc
for an indefinite number of items?
I normally have a very good understanding of CSS but this is hurting my brain a little so thanks in advance for any help!
It seems like you are making a simple checkerboard, so if you set every thing to green, you just need to override everything that needs to be blue. nth-child
can also accept a fomula that gives an n
or multiple of n
with an offset.
As you have them numbered, note that in the right column you have 4
and 8
(next would be 12
), so you need every 4th element, and in the left you have 1
and 5
(next would be 9
), so you also need the 4th plus one (1 is technically 4*0+1
).
There is a fiddle here that demos it, but the relevant code is:
/* Color everything green */
.checkerboard div {
width:45%;
display:inline-block;
background-color:green;
}
/* Then color the appropriate divs blue */
.checkerboard div:nth-child(4n+1),
.checkerboard div:nth-child(4n) {
background-color:blue;
}
And gives:
这篇关于使用CSS选择器创建棋盘图案的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!