Question

我想用不同的CSS显示从数据库中抓取的每第4行：

<div class="last"></div>

但其余部分应该正常显示：

<div></div>

我使用简单查询从数据库中获取数据：

SELECT LEN(column_name) FROM table_name

我看到了这种类型的东西，但我不记得如何正确地做到这一点。有什么想法吗？

Answer 1

使用css like

tr:nth-child(4n) {  
   background-color:yellow;
}

Answer 2

<div<?php echo $i % 4 == 0 ? ' class="last"' : '' ?>>...</div>

使用％得到除法余数，如果它等于零，那么它恰好是第四个div，我们需要用类打印它，否则什么都不打印。

Answer 3

这不是你应该在SQL中做的事情。让PHP中的变量作为从0开始的计数器，并在计数器的模数4为3时使用备用类。

Answer 4

<?php 
    $query = "SELECT LEN(column_name) FROM table_name";
    $result = mysql_query($query);
    $i = 1;
    echo  "<table>";
    while ($row = mysql_fetch_assoc($result)) {
        echo  "<tr><td>";
        echo  "<p";
        if ($i % 4 == 0) print " class='stripe'";
       echo  ">" . $row['item'] . "</p></td></tr>";
        $i++;
     }
    echo  "</table>";
?>

Answer 5

qustion是荒谬的我不知道你为什么要在db中设置你的css风格..这样做不合逻辑你会不必要地增加查询的复杂性。

无论如何，我的建议是在您的Web层中执行相同操作，即从db中检索记录并呈现页面。只需编写将添加css类的sm逻辑..

Answer 6

您可以在CSS中使用nth-child伪选择器：http://www.w3.org/TR/css3-selectors/#nth-child-pseudo

目前，浏览器支持非常受限。所以我不推荐它。

你可以使用：nth-child（）选择器和JQuery：http://api.jquery.com/nth-child-selector/ 或者你可以编写自己的Javascript，这也很简单。

或者，您可以在后端替换颜色（模板引擎，PHP，ASP等）。

从数据库中执行它只是奇怪而错误的地方：）

Answer 7

这样的事情：

<?php 
    $query = "SELECT LEN(column_name) FROM table_name";
    $result = mysql_query($query);
    $i = 1;
    print "<table>";
    while ($row = mysql_fetch_assoc($result)) {
        print "<tr><td>";
        print "<p";
        if ($i % 4 == 0) print " class='stripe'";
        print ">" . $row['item'] . "</p></td></tr>";
        $i++;
     }
     print "</table>";
?>

Answer 8

不要使用SQL查询，使用PHP执行此操作：

  $result = mysql_query("SELECT * FROM table_name");
  $i = 1;    
  while($row = mysql_fetch_array($result))
  {
     $class = ($i % 4 == 0) ? ' last' : '';        
     echo '<div class="'.$class.'"></div>';
     $i++;
  }

Answer 9

这就是 Bootstrap does it

.table-striped tbody tr:nth-child(odd) {  
    background-color: rgba(0, 0, 0, 0.05);
}

因此您可以创建自己的类并将 odd 替换为 4n

.table-striped-4th tbody tr:nth-child(4n) {  
    background-color: rgba(0, 0, 0, 0.05);
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

每4行改变一次css

9 个答案: