css中的图像数组和HTML中的检索

我想为3个按钮使用一个类，但具有不同的

背景图像

，这样每个按钮都有自己的图像。我想在css中声明一个背景图像数组，然后检索图像。然而，根据我的研究，css中没有数组声明。是这样吗？如果是，我必须为每个按钮检索每个图像的替代方案是什么

HTML

使用

：n-child（）

选择器。CSS代码将变成：

.access_item {
  display: inline-block;
  background: none;
  border: 0;
  cursor: pointer;
  appearance: none; 
}

.access_icon {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 20px;

}

.access_item:nth-child(1) > .access_icon {
  background-image: url("https://picsum.photos/id/237/200/300"); //Image 1
}

.access_item:nth-child(2) > .access_icon {
  background-image: url("https://picsum.photos/seed/picsum/200/300"); //Image 2
}

.access_item:nth-child(3) > .access_icon {
  background-image: url("https://picsum.photos/200/300/?blur"); //Image 3
}

---

也许有些人不同意这一点。但我会使用CSS ID或其他CSS类来实现解决方案

因此，您不受按钮嵌套和顺序的限制

v1使用CSS ID HTML:

...
<button class="access_item" id="button_1" >
        <span class="access_icon"></span>Button_1
</button>

<button class="access_item" id="button_2" >
        <span class="access_icon"></span>Button_2
</button>

<button class="access_item" id="button_3" >
        <span class="access_icon"></span>Button_3
</button>
...

.access_item {
    display: inline-block;
    background: none;
    border: 0;
    cursor: pointer;
    appearance: none; 
}
.access_icon {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-bottom: 20px;
}
#button_1 {
    background-image: url("https://picsum.photos/id/237/200/300"); //Image 1
}
#button_2 {
    background-image: url("https://picsum.photos/seed/picsum/200/300"); //Image 2
}
#button_3 {
    background-image: url("https://picsum.photos/200/300/?blur"); //Image 3
}

...
<button class="access_item button_1" >
        <span class="access_icon"></span>Button_1
</button>

<button class="access_item button_2" >
        <span class="access_icon"></span>Button_2
</button>

<button class="access_item button_3" >
        <span class="access_icon"></span>Button_3
</button>
...

.access_item {
    display: inline-block;
    background: none;
    border: 0;
    cursor: pointer;
    appearance: none; 
}
.access_icon {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-bottom: 20px;
}
.button_1 {
    background-image: url("https://picsum.photos/id/237/200/300"); //Image 1
}
.button_2 {
    background-image: url("https://picsum.photos/seed/picsum/200/300"); //Image 2
}
.button_3 {
    background-image: url("https://picsum.photos/200/300/?blur"); //Image 3
}

v2使用其他CSS类HTML:

...
<button class="access_item" id="button_1" >
        <span class="access_icon"></span>Button_1
</button>

<button class="access_item" id="button_2" >
        <span class="access_icon"></span>Button_2
</button>

<button class="access_item" id="button_3" >
        <span class="access_icon"></span>Button_3
</button>
...

.access_item {
    display: inline-block;
    background: none;
    border: 0;
    cursor: pointer;
    appearance: none; 
}
.access_icon {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-bottom: 20px;
}
#button_1 {
    background-image: url("https://picsum.photos/id/237/200/300"); //Image 1
}
#button_2 {
    background-image: url("https://picsum.photos/seed/picsum/200/300"); //Image 2
}
#button_3 {
    background-image: url("https://picsum.photos/200/300/?blur"); //Image 3
}

...
<button class="access_item button_1" >
        <span class="access_icon"></span>Button_1
</button>

<button class="access_item button_2" >
        <span class="access_icon"></span>Button_2
</button>

<button class="access_item button_3" >
        <span class="access_icon"></span>Button_3
</button>
...

.access_item {
    display: inline-block;
    background: none;
    border: 0;
    cursor: pointer;
    appearance: none; 
}
.access_icon {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-bottom: 20px;
}
.button_1 {
    background-image: url("https://picsum.photos/id/237/200/300"); //Image 1
}
.button_2 {
    background-image: url("https://picsum.photos/seed/picsum/200/300"); //Image 2
}
.button_3 {
    background-image: url("https://picsum.photos/200/300/?blur"); //Image 3
}

---

嘿，谢谢，但是纽扣只带了第n个孩子。我必须在HTML中声明为

？我已经修改了它。现在应该可以了。