Question

我希望以不同的CSS样式显示从数据库中抓取的每第4行。 DB的前三行应采用CSS样式（col-4），但第四行应采用CSS样式（col-4 last）：如何使用PHP执行此操作。我的代码如下所示。

<?php foreach($result as $value) : ?>
    <div class="col-4">
        <a href="view.php?m_id=<?php echo $value['m_id']; ?>">
            <img alt="" src="<?php echo $value['m_image']; ?>" width="131px" height="120px">
        </a>
        <h3><a href="view.php?m_id=<?php echo $value['m_id']; ?>"><?php echo $value['m_title']; ?></a></h3>
        <p><strong><?php echo $value['name']; ?></strong> </p>
        <p><?php echo date('M j, g:i A', strtotime($value['date'])); ?></p>
    </div>
<?php endforeach; ?>

Answer 1

您可以使用:nth-child CSS选择器轻松完成此操作：

.col-4:nth-child(4n) {
    /* styles for every 4th row */
}

如果您不想为每个第4行添加样式，而是仅第4行，请不要使用n中的4n：

.col-4:nth-child(4) { ... }

Browser compatibility一点都不差;除了IE之外的一切＆lt;支持9。

Answer 2

您根本不需要使用PHP; CSS自行提供此功能。

.col-4 { 
    ..... your standard css for the columns ...... 
}
.col-4:nth-child(4) { 
    ..... your special css for the 4th column
}

或者，如果第4个元素是集合中的最后一个元素（正如您在问题中暗示的那样），则可以使用col-4:last-child { ... }代替。

浏览器兼容性说明：如果您需要使用这些选择器支持IE8或更早版本，则需要使用CSS填充脚本，例如Selectivizr，因为较旧的IE版本不支持它。 Selectivizr很好地处理了这个问题。

Answer 3

只需计算您输出的行数并使用模数来检查它是否是第4行：

$index = 0;
<?php foreach($result as $value) : ?>
    <div class="col-4<?php if (++$index % 4 == 0): ?> last<?php endif; ?>">
        <a href="view.php?m_id=<?php echo $value['m_id']; ?>">
            <img alt="" src="<?php echo $value['m_image']; ?>" width="131px" height="120px">
        </a>
        <h3><a href="view.php?m_id=<?php echo $value['m_id']; ?>"><?php echo $value['m_title']; ?></a></h3>
        <p><strong><?php echo $value['name']; ?></strong> </p>
        <p><?php echo date('M j, g:i A', strtotime($value['date'])); ?></p>
    </div>
<?php endforeach; ?>

Answer 4

<?php foreach($result as $i=>$value) : ?>
    <div class="col-4<? if ($i%4==3) echo ' last'; ?>">

Answer 5

div:nth-child(4n)

在css中使用带有乘数的nth-child

http://css-tricks.com/how-nth-child-works/

此处也被问到：Select every Nth element in CSS

每4行更改一次css

5 个答案: