是否有更好或更有效的方法来实现这一目标?

我基本上是想在每行中选择第一项以删除其边距,在我的示例中以青色标记。我有一点点技巧,但是此内容是动态的,因此不会长期有效。

我以为使用第7个孩子7可以使用,但由于项目数量奇异,所以不可行。好吧,我认为这就是原因。

看看我的笔http://codepen.io/qwerty-design/pen/JGmYwo

任何提示,不胜感激。

.brochure-download-thumbs li:nth-child(6n) {
  margin-right: 0;
  background: pink;
}

.brochure-download-thumbs li:first-child {
  background: red;
  margin-left: 0;
}

.brochure-download-thumbs li:nth-child(7),
.brochure-download-thumbs  li:nth-child(13),
.brochure-download-thumbs li:nth-child(19),
.brochure-download-thumbs li:nth-child(25)  {
  margin-left: 0;
  background: teal;
}


HTML只是一个简单的无序列表。

最佳答案

您可以将6n+7用作:nth-child的参数,而不是分别选择第7、13、19、25个元素。

.brochure-download-thumbs li:nth-child(6n+7)  {
  margin-left: 0;
  background: teal;
}




body {
  font-family: sans-serif;
  color: #333;
}
.brochure-download-thumbs {
  width: 965px;
  background: #eee;
}
.brochure-download-thumbs li {
  list-style-type: none;
  text-align: center;
  display: inline-block;
  margin: 0 10px 30px 10px;
}
.brochure-download-thumbs li img {
  border: 6px solid #1db4d3;
}
.brochure-download-thumbs li a {
  color: #333;
  text-decoration: none;
}
.brochure-download-thumbs li:nth-child(6n) {
  margin-right: 0;
  background: pink;
}
.brochure-download-thumbs li:first-child {
  background: red;
  margin-left: 0;
}
.brochure-download-thumbs li:nth-child(6n+7) {
  margin-left: 0;
  background: teal;
}

<h1 class="sectionTitle">Mono Machines</h1>

<ul class="brochure-download-thumbs">
  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>
  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>
  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>
  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>
  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>
  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>
  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>
  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>
  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>
  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>
  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>
  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>
  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>
  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>
  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>


  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>

  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>

  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>

  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>

  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>

  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>

  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>

  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>

  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>

  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>

  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>

  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>

</ul>

<h1 class="sectionTitle">Colour Machines</h1>

<ul class="brochure-download-thumbs">
  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>
  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>


  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>

  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>

  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>

  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>

  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>

  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>

  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>

  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>

  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>

  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>

  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>

  <li>
    <a href="#">
      <img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
    </a>
    <a href="#">
      <p>Ineo 227</p>
    </a>
  </li>
</ul>





如果您还希望选择第一个元素,那么我们可以使用6n+1,但是由于您只希望选择第7个以后的元素,因此可以选择6n+7。这实际上取决于您要选择的元素。如果第一个元素也需要与第7个,第13个等相同的设置,那么最好使用6n+1

10-05 20:57
查看更多