Ul和li造型

Question

我有＆＃39; 和＆＃39; 结构元素，我需要将css应用于 li < / strong>以这种方式，在每4个 li 元素之后，第5个 li 应该采用给定的css。
我已给予保证金权利：26px到每个li，但我想给予保证金权利：0px到第5个元素 以下是我的Html：

 <ul class="clearfix">       
          <li><a href="CSR_Js/CSR-PhotoGallery/images/photos/01-turntable-illustration-graphic.png"  title="Turntable by Jens Kappelmann">
              <img src="CSR_Js/CSR-PhotoGallery/images/photos/01-turntable-illustration-graphic-thumbnail.png" width="170" height="150" alt="turntable"></a></li>

          <li><a href="CSR_Js/CSR-PhotoGallery/images/photos/02-robot-diy-kit.png" title="DIY Robot by Jory Raphael">
              <img src="CSR_Js/CSR-PhotoGallery/images/photos/02-robot-diy-kit-thumbnail.png" width="170" height="150" alt="DIY Robot Kit"></a></li>

          <li><a href="CSR_Js/CSR-PhotoGallery/images/photos/03-todly-green-monster.png" title="Todly by Scott Wetterschneider">
              <img src="CSR_Js/CSR-PhotoGallery/images/photos/03-todly-green-monster-thumbnail.png" width="170" height="150" alt="Todly"></a></li>

          <li><a href="CSR_Js/CSR-PhotoGallery/images/photos/04-loz-tea-party.png" title="LoZ Tea Party by Joseph Le">
              <img src="CSR_Js/CSR-PhotoGallery/images/photos/04-loz-tea-party-thumbnail.png" width="170" height="150" alt="legend of zelda tea party"></a></li>

          <li><a href="CSR_Js/CSR-PhotoGallery/images/photos/05-klaxon-air-horn.png" title="Klaxon Icon by John Khester">
              <img src="CSR_Js/CSR-PhotoGallery/images/photos/05-klaxon-air-horn-thumbnail.png" width="170" height="150" alt="airhorn icon"></a></li>

          <li><a href="CSR_Js/CSR-PhotoGallery/images/photos/06-flat-coffee.png" title="Flat Coffee by Baglan Dosmagambetov">
              <img src="CSR_Js/CSR-PhotoGallery/images/photos/06-flat-coffee-thumbnail.png" width="170" height="150" alt="flat coffee"></a></li>

          <li><a href="CSR_Js/CSR-PhotoGallery/images/photos/07-ipad-music-player.png" title="iPad Music Player by Angel Bartolli">
              <img src="CSR_Js/CSR-PhotoGallery/images/photos/07-ipad-music-player-thumbnail.png" width="170" height="150" alt="player ui"></a></li>

          <li><a href="CSR_Js/CSR-PhotoGallery/images/photos/08-extreme-fish-bowl.png" title="Extreme Fish Bowl by Brian Franco">
              <img src="CSR_Js/CSR-PhotoGallery/images/photos/08-extreme-fish-bowl-thumbnail.png" width="170" height="150" alt="extreme skateboarding fish bowl"></a></li>

          <li><a href="CSR_Js/CSR-PhotoGallery/images/photos/09-city-building-illustration.png" title="Illustration by Brandon Ancone">
              <img src="CSR_Js/CSR-PhotoGallery/images/photos/09-city-building-illustration-thumbnail.png" width="170" height="150" alt="city illustration"></a></li>

          <li><a href="CSR_Js/CSR-PhotoGallery/images/photos/10-big-restaurant.png" title="Restaurant Illustration by Dury">
              <img src="CSR_Js/CSR-PhotoGallery/images/photos/10-big-restaurant-thumbnail.png" width="170" height="150" alt="restaurant illustration"></a></li>

      </ul>

Css就是这样;

#thumbnails ul li {
    float: left;
    margin-right: 26px;
    margin-bottom: 12px;
}

Answer 1

使用nth-child：

li:nth-child(5n){
  /*style here*/
}

Answer 2

您可以使用伪类nth-child来实现此目的，请参阅this。

li:nth-child(5n)
{

    color:red;
}

但旧版浏览器不支持 ，因此作为后备版，您可以使用库selectivizr。另请阅读this