css - 使用 :nth-child() 很难定位

Question

我很难定位到第二个 <img>应用 .css 的标签规则，但它不起作用:

这是我的代码:

.product-highlights img:nth-of-type(2) {
  margin: 0 4px;
}

<div class="product-highlights">
  <div class="grid-container full">
    <div class="grid-x">
      <div class="cell small-4">
        <a href="#">
          <img src="http://via.placeholder.com/350x150" alt="Discounts">
        </a>
      </div>
      <div class="cell small-4">
        <a href="#">
          <img src="http://via.placeholder.com/350x150" alt="Discounts">
        </a>
      </div>
      <div class="cell small-4">
        <a href="#">
          <img src="http://via.placeholder.com/350x150" alt="Discounts">
        </a>
      </div>
    </div>
  </div>
</div>

我做错了什么？

Answer 1

正如我在上面的评论中指出的那样，nth-of-type 只查看 sibling ，因此在您的情况下，改为定位图像的父 div:

.product-highlights .cell:nth-of-type(2) img{
  margin: 0 4px;
}

<div class="product-highlights">
  <div class="grid-container full">
    <div class="grid-x">
      <div class="cell small-4">
        <a href="#">
          <img src="http://via.placeholder.com/350x150" alt="Discounts">
        </a>
      </div>
      <div class="cell small-4">
        <a href="#">
          <img src="http://via.placeholder.com/350x150" alt="Discounts">
        </a>
      </div>
      <div class="cell small-4">
        <a href="#">
          <img src="http://via.placeholder.com/350x150" alt="Discounts">
        </a>
      </div>
    </div>
  </div>
</div>