Question

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

我基本上想要选择每行中的第一项来移除其边距，在我的示例中标记为teal。我已经得到了一些黑客攻击，但这个内容将是动态的，所以它不会真正长时间工作。

我认为使用第n个孩子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只是一个简单的无序列表。

Answer 1

您可以使用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。

Answer 2

您可以这样做：

li:nth-child(6n+1)

这将始终与示例中每行的第一项匹配。

使用第n个子项选择奇数行中的项目

2 个答案: