Question

CSS可以重复使用不同的颜色吗？例如，它有20个项目，每个项目有5个不同的bgcolors。

html喜欢

<div class="item"> ... item 1 .. </div> 
<div class="item"> ... item 2 .. </div> 
<div class="item"> ... item 3 .. </div> 
...
<div class="item"> ... item 20 .. </div>

正如我在CSS中所知道的那样

.item:nth-child(1){
  background-color: red;
}
.item:nth-child(2){
  background-color: blue;
}
.item:nth-child(3){
  background-color: yellow;
}
...
.item:nth-child(5){
  background-color: green;
}

据我所知，为了使其正常工作，我将对每个.item:nth-child(n)进行编码并指定不同的颜色 - 这是静态的。

可以通过动态来完成吗？我只能分配颜色的.item:nth-child(n) 20代码？相反，CSS会为每个5项分配不同的颜色？比如颜色1是红色，2是蓝色，3是黄色，4是紫色，5是绿色 - 然后它重复，项目6再次变红等等......直到20变为绿色。最大的冲突是，我们无法将另一个类添加到div只有item类。这个理论有可能吗？

Answer 1

你可以这样做：

＆＃13;

def my_function(x={}):
for i , j in x:
    print (i)
    print (j)

data = {'a':1, 'b': 2, 'c': 3}
my_function(**data)

＆＃13;

.item:nth-child(5n + 1) {
  background-color: red;
}

.item:nth-child(5n + 2) {
  background-color: blue;
}

.item:nth-child(5n + 3) {
  background-color: yellow;
}

.item:nth-child(5n + 4) {
  background-color: violet;
}

.item:nth-child(5n + 5) {
  background-color: green;
}

＆＃13;

关键是要确定您希望模式重复多少<div class="item"> ... item 1 .. </div> <div class="item"> ... item 2 .. </div> <div class="item"> ... item 3 .. </div> <div class="item"> ... item 4 .. </div> <div class="item"> ... item 5 .. </div> <div class="item"> ... item 6 .. </div> <div class="item"> ... item 7 .. </div> <div class="item"> ... item 8 .. </div> <div class="item"> ... item 9 .. </div> <div class="item"> ... item 10 .. </div> <div class="item"> ... item 11 .. </div> <div class="item"> ... item 12 .. </div> <div class="item"> ... item 13 .. </div> <div class="item"> ... item 14 .. </div> <div class="item"> ... item 15 .. </div> <div class="item"> ... item 16 .. </div> <div class="item"> ... item 17 .. </div> <div class="item"> ... item 18 .. </div> <div class="item"> ... item 19 .. </div> <div class="item"> ... item 20 .. </div>，这是第一个数字或div，然后用数字设置它们的出现顺序5n至+1。

Answer 2

当然，请查看+5 here。

＆＃13;

functional notation

＆＃13;

.item:nth-child(3n) {
  color: red;
}

.item:nth-child(3n+1) {
  color: blue;
}

.item:nth-child(3n+2) {
  color: green;
}

＆＃13;

背景颜色不同的物品

2 个答案: