表中添加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; 
} 

代替。這將允許您定位表格的各個行。