CSS/PHP -为每个PHP字符串使用不同的CSS - CSS/PHP - Using Different CSS for each PHP string

CSS/PHP - Using Different CSS for each PHP string

本文关键字：PHP CSS 字符串 | 更新日期: 2023-09-27

我在前段时间发布了我的原始问题，回到这里:

CSS/PHP -使用Hover和If语句覆盖图像

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

<?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"server"类下。这带来了问题，因为我需要每个服务器返回不同的图像。

下面是服务器类的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列表?

谢谢!

.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;
}
...

如果你想为每个服务器添加特定的css，你可以添加一个额外的类:

<div class="server background_image_class_<?php echo $server->ID; ?>">
                                                    ^^^^^^^^^^^^ some variable that uniquely identifies the server.

如果图像与服务器信息存储在同一个数据库中，还可以使用内联css:

<div class="server" style="background-image: url(<?php echo $server->backgroundImage; ?>);">

编辑:你可以从服务器url中删除所有非单词字符，并将其用作类名:

<div class="server <?php echo  preg_replace("/[^'w]/", "", $server); ?>">

现在你可以在css中使用修改后的服务器名了:

.server {
  // general styles
  background-repeat: no-repeat;
  // etc.
}
.hg1playminezoneco {
  // image background form this specific server
  background-image: url(/path/to/hg1playminezoneco.png);
}
.hg1playminezoneco:hover {
  // image background form this specific server on hover
  background-image: url(/path/to/hg1playminezoneco-hover.png);
}
.pvpplayminezoneco {
  background-image: url(/path/to/pvpplayminezoneco.png);
}
.pvpplayminezoneco:hover {
  background-image: url(/path/to/pvpplayminezoneco-hover.png);
}
// etc.

从服务器类中删除图像特定的CSS，例如背景。为图片的ID指定特定的CSS。