表中添加BG图像孩子的div

Question

我有一个包含3周的div如下表：

<table class="launcherGrid"> 
<tbody> 
    <tr rowindex="0"> 
     <td> 
      <div class="app-launch "> 
       <i class="fa-launch fa-app"></i>aaa <span class="app-version"> 
        v0</span> <span class="app-description">111</span> 
      </div> 
     </td> 
    </tr> 
    <tr rowindex="1"> 
     <td> 
      <div class="app-launch "> 
       <i class="fa-launch fa-app"></i>bbb <span class="app-version"> 
        v0</span> <span class="app-description">222</span> 
      </div> 
     </td> 
    </tr> 
    <tr rowindex="2"> 
     <td> 
      <div class="app-launch "> 
       <i class="fa-launch fa-app"></i>ccc <span class="app-version"> 
        v0</span> <span class="app-description">333</span> 
      </div> 
     </td> 
    </tr> 
</tbody> 

我试图通过CSS不同的背景图像应用到每个格，我不能修改源代码。

我试图找出每一个使用：

.launcherGrid div:nth-child(2) { 
    background: url(../img/icon-admin.png) right no-repeat; 
} 

但这modofies所有div。任何有关如何只用CSS就可以完成的建议。

Answer 1

针对<tr> nth-child然后您的应用程序启动类，它应该工作。 Fiddle

.launcherGrid tr:nth-child(1) div.app-launch { 
 
    background: url('https://placehold.it/250x100') right no-repeat; 
 
    height: 100px; 
 
} 
 

 
.launcherGrid tr:nth-child(2) div.app-launch { 
 
    background: url('https://placehold.it/225x70') right no-repeat; 
 
    height: 70px; 
 
} 
 

 
.launcherGrid tr:nth-child(3) div.app-launch { 
 
    background: url('https://placehold.it/200x50') right no-repeat; 
 
    height: 50px; 
 
}

<table class="launcherGrid"> 
 
<tbody> 
 
<tr rowindex="0"> 
 
<td> 
 
<div class="app-launch "> 
 
<i class="fa-launch fa-app"></i>aaa 
 
<span class="app-version"> v0</span> 
 
<span class="app-description">111</span> </div> 
 
</td> 
 
</tr> 
 
<tr rowindex="1"> 
 
<td> 
 
<div class="app-launch "> 
 
<i class="fa-launch fa-app"></i>bbb 
 
<span class="app-version"> v0</span> 
 
<span class="app-description">222</span> 
 
</div> 
 
</td> 
 
</tr> 
 
<tr rowindex="2"> 
 
<td> 
 
<div class="app-launch "> 
 
<i class="fa-launch fa-app"></i>ccc 
 
<span class="app-version"> v0</span> 
 
<span class="app-description">333</span> 
 
</div> 
 
</td> 
 
</tr> 
 
</tbody> 
 
</table>

Answer 2

：类型作品的第n个基于关闭的父元素。

你的CSS不工作，因为每个td只有一个div。

尝试

.launcherGrid tr:nth-of-type(1){ 
    background: url(../img/icon-admin.png) right no-repeat; 
} 

代替。这将允许您定位表格的各个行。