php - CSS/PHP - 为每个 PHP 字符串使用不同的 CSS

Question

我刚才发布了我的原始问题，回到这里:

CSS/PHP - Overlaying an Image with Hover and If Statements

从那以后，我解决了我的主要问题，现在还剩下一个问题。返回服务器的代码如下所示:

<?php 
  foreach($servers as $server): 

  $stats = \Minecraft\Stats::retrieve(new \Minecraft\Server($server)); 
?>
<center>
  <pre>
    <div class="server">
      <div class="overlay"></div>
      <div class="<?php echo($stats->is_online) ? 'online' : 'offline'; ?>"></div>
      <div class="numbers"><?php printf('%u/%u', $stats->online_players, $stats->max_players); ?></div>         
    </div>
  </pre>
</center>

如您所见，所有这些服务器都在一个 CSS“服务器”类下。这会带来问题，因为我需要返回的每个服务器都有不同的图像。

这是服务器类的 CSS:

.server {
    background: url('img/servers/hg.png') center no-repeat;
    width:  330px;
    height: 280px;
    overflow: hidden;
    position: relative;
 }
.server:hover { 
    background: url('img/servers/hg-hover.png') center no-repeat;
 }

我如何选择单个服务器，或列出要执行的 CSS？

谢谢!

Answer 1

.server:nth-child(1) {
    background: url('img/servers/hg1.png') center no-repeat;
}
.server:nth-child(2) {
    background: url('img/servers/hg2.png') center no-repeat;
}
.server:nth-child(3) {
    background: url('img/servers/hg3.png') center no-repeat;
}
...