while 取的data搭配css時，while最後一筆的css客製？

php css css3 php7 while

火爆浪子 2018-09-17 13:09:38 ‧ 2248 瀏覽

分享至

  .swiper{
    vertical-align: top;
    width: 82%;
    display: inline-block;
    margin: 0px 0px 20px 20px;
    white-space: normal;
  }

<? while ($row = mysqli_fetch_array($sql)){?>
    <div class="swiper"></div>
<? }?>

當這個 while 的最後一筆時
最後那筆的 <div> 的 swiper 我想要改變樣式
將 margin: 0px 0px 20px 20px; 改為 margin: 0px 20px 20px 20px;
但最後一筆之前的所有筆數都維持不變...
請問這能怎麼做？

ccutmis iT邦高手 2 級 ‧ 2018-09-17 13:51:39 檢舉

試試：
div.swiper{
vertical-align: top;
width: 82%;
display: inline-block;
margin: 0px 0px 20px 20px;
white-space: normal;
}
div.swiper:last-child {
margin: 0px 20px 20px 20px;
background-color:#f00;
}

火爆浪子 iT邦研究生 1 級 ‧ 2018-09-17 14:33:20 檢舉

ＴＯ ccutmis ～～～可以。

ccutmis iT邦高手 2 級 ‧ 2018-09-17 16:15:50 檢舉

good luck!

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

froce

iT邦大師 1 級 ‧ 2018-09-17 13:32:17

最佳解答

CSS直接做。
https://jsbin.com/voxifap/1/edit?html,output
https://www.w3schools.com/cssref/sel_last-child.asp

回應
分享
檢舉

登入發表回應

Luke

iT邦研究生 5 級 ‧ 2018-09-17 13:24:54

jQuery( ":last" )
Example:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>last demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<table>
  <tr><td>First Row</td></tr>
  <tr><td>Middle Row</td></tr>
  <tr><td>Last Row</td></tr>
</table>
 
<script>
$( "tr:last" ).css({ backgroundColor: "yellow", fontWeight: "bolder" });
</script>
 
</body>
</html>

或用程式判斷或...等多種方式