Question

我面临一个小问题，我有一个名为“负边距”的css类，我只想在一系列div中的第一个div中应用一次，因为它是我设计的一部分。代码如下：

<?php foreach($records as $rec){ ?>
<div class="grid grid-lightgrey grid-pad negative-margin">
   <div class="col-1-1">
     <div class="module module-grey">

       <em>Project title: <?php echo $rec->project_title; ?></em><br>
       <em>Category: </em><?php echo $rec->project_category; ?><br>
       <em>Description: </em><?php echo $rec->project_description; ?>
        <br>
        <em>This project was started in: <?php echo $rec->project_year; ?></em><br>
        <em>This project ID is: </em>
        <?php echo $rec->project_id; ?>
     </div>
   </div>
</div>
<?php } ?>

类负边距适用于所有div，使它们叠加在一起，这不是我想要的，但我需要在第一个div中应用这个负边距，正如我为设计目的所说的那样我真的不知道如何实现这一目标。任何想法都将不胜感激。

Answer 1

使用first-child selector定义仅适用于第一个div的CSS样式。

div.grid:first-child { 
    margin-left: -10px;
}

Answer 2

您需要一个变量来跟踪第一个元素，因为没有其他方法可以知道foreach循环中的索引。你可以这样做：

<?php $i = 0; foreach($records as $rec): ?>
<div class="grid grid-lightgrey grid-pad <?php echo ($i == 0) ? 'negative-margin' : ''; ?>">
   <div class="col-1-1">
     <div class="module module-grey">

       <em>Project title: <?php echo $rec->project_title; ?></em><br>
       <em>Category: </em><?php echo $rec->project_category; ?><br>
       <em>Description: </em><?php echo $rec->project_description; ?>
        <br>
        <em>This project was started in: <?php echo $rec->project_year; ?></em><br>
        <em>This project ID is: </em>
        <?php echo $rec->project_id; ?>
     </div>
   </div>
</div>
<?php $i++; endforeach; ?>

如何在PHP的第一次迭代中只回显一次CSS类？

2 个答案: