我很难定位到第二个 <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>
我做错了什么?
最佳答案
正如我在上面的评论中指出的那样,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>
关于css - 使用 :nth-child() 很难定位 <img>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49921828/