改变通过while循环检索的输出的div形式

时间:2014-10-15 14:39:51

标签: css loops

我在想,如何在循环中更改不同输出的css选项?

例如,我从数据库得到10个结果,我想将前5个输出的颜色更改为红色,并在每个用户名旁边添加一张星的照片..

有什么想法吗?

    $sql = "SELECT tele_members.Username, tele_members_results_k.Sum, tele_members_results_k.Correct, tele_members_results_k.Incorrect FROM `tele_members` LEFT JOIN `tele_members_results_k` ON tele_members.ID = tele_members_results_k.ID WHERE `Correct` - `Incorrect` > '0' ORDER BY `Sum` DESC";
    $query = mysql_query ($sql) or die("Error: " .$mysql_error());

    echo "<table width='639' border='0' cellspacing='0' cellpadding='2'>";
    echo "<tr>";
    echo "<td><b>Логин:</b></td>";
    echo "<td><b>Правильные:</b></td>";
    echo "<td><b>Неправильные:</b></td>";
    echo "<td><b>Активность:</b></td>";
    echo "<td><b>Сумма:</td></b>";
    echo "</tr>";

    while ($row = mysql_fetch_assoc($query)) {
        echo "<tr>";
        for (x=0; x>1; x++) { //I was trying to give the first row name "row1" and change the CSS options for "#row1"
        echo "<div id=row$x>";
        echo "<td>$row[Username]</td>";
        echo "<td>$row[Correct]</td>";
        echo "<td>$row[Incorrect]</td>";
$activity = $row[Correct] - $row[Incorrect]; //I wanted to calculate the number "quantity" of questions using the formula (correct) - (-incorrect)
        echo "<td>$activity</td>";
        echo "<td>$row[Sum]</td>";
        echo "</tr>";
        }
        echo "<td>$row[Username]</td>";
        echo "<td>$row[Correct]</td>";
        echo "<td>$row[Incorrect]</td>";
$activity = $row[Correct] - $row[Incorrect]; //I wanted to calculate the number "quantity" of questions using the formula (correct) - (-incorrect)
        echo "<td>$activity</td>";
        echo "<td>$row[Sum]</td>";
        echo "</tr>";
    }
    echo "</table>";
    }

我希望这可以帮助

1 个答案:

答案 0 :(得分:1)

哦,也许是这样的?运行代码段或前往jsfiddle - demo

&#13;
&#13;
.block__item {
  background: #9c0;
  width: 200px;
  height: 100px;
  margin-bottom: 10px;
  position: relative;
}
.block__item:nth-child(-n+5) {
  background: #455E00;
}
.block__item:nth-child(-n+5):before {
  content: '\2605';
  position: absolute;
  right: 5px;
  top: 2px;
  color: #fff;
  font-size: 22px;
}
&#13;
<div class="blocks">
  <div>
    <div class="block__item">block-1</div>
    <div class="block__item">block-2</div>
    <div class="block__item">block-3</div>
    <div class="block__item">block-4</div>
    <div class="block__item">block-5</div>
    <div class="block__item">block-6</div>
    <div class="block__item">block-7</div>
    <div class="block__item">block-8</div>
    <div class="block__item">block-9</div>
    <div class="block__item">block-10</div>
  </div>
</div>
&#13;
&#13;
&#13;