时间戳

首页 > 解决方案 > 更改每个子 div 的背景图像

html - 更改每个子 div 的背景图像

问题描述

我有下面的html：

  <ul class="blocks-list">
    {{#each categories}}  
      <li class="blocks-item">
      <a href='{{url}}' class="blocks-item-link">
        <div class="blocks-item-image"></div>
        <div class="blocks-item-text">      
            <p class="blocks-item-title">{{name}}</p>
            <p class="blocks-item-description">{{excerpt description}}</p>
            <div class="chevron">></div>
        </div>
        </a>
      </li>
    {{/each}}
  </ul>

它将为每个“类别”显示一个“块项目”。我希望列表中的每个“blocks-item-image”都有不同的背景图像。我尝试了下面的 css，但不知何故，所有 div 都具有相同的背景图像。

.blocks-item-image:nth-child(1) {
  background-image: url("https://picsum.photos/id/1/300/200");
}

标签： htmlcsscss-selectors

解决方案

css nth-child 选择器适用于兄弟姐妹组。

所以你需要像这样改变你的CSS：

li.blocks-item:nth-child(1) .blocks-item-image {
      background-image: url("https://picsum.photos/id/1/20/20");
}

因此，通过这样做，li.blocks-item:nth-child您将 nth-child 选择器应用于一组兄弟姐妹 ( li.blocks-item)，这是相关问题的解决方案。

.blocks-item-image{
    min-width:20px;
  min-height:20px;
  background-image: none;
}
li.blocks-item:nth-child(1) .blocks-item-image {
  background-image: url("https://picsum.photos/id/1/20/20");
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<ul class="blocks-list">
    
      <li class="blocks-item">
      <a href='{{url}}' class="blocks-item-link">
        <div class="blocks-item-image"></div>
        <div class="blocks-item-text">      
            <p class="blocks-item-title">First Item</p>
            <p class="blocks-item-description">First description</p>
            <div class="chevron">></div>
        </div>
        </a>
      </li>
      <li class="blocks-item">
      <a href='{{url}}' class="blocks-item-link">
        <div class="blocks-item-image"></div>
        <div class="blocks-item-text">      
            <p class="blocks-item-title">Second Items</p>
            <p class="blocks-item-description">Second Description</p>
            <div class="chevron">></div>
        </div>
        </a>
      </li>
    
  </ul>

</body>
</html>

推荐阅读