Question

感谢阅读！今天与nth-child选择器有一些问题...... 这是HTML代码，后面是CSS ...

以下基本上只是一个＆lt; ul＆gt; ＆LT; li>多数民众赞成重复3倍我试图删除第三元素的右边距但不知何故我的代码不起作用。感谢任何建议！

<div id="RightContent">
<h4>Jewelry</h4>

<ul class="grid cs-style-1">

  <a href="#ProductDetail">
   <li>
    <figure>
     <img src="images/ring.jpg" alt="img01">
      <figcaption>
      <h3>Atlas® closed narrow ring in 18k rose gold with a diamond.</h3>
      <span class="price">800</span>
      <a href="#Cart"><span class="add">Add to Shopping Bag</span>
      </figcaption>
     </figure>
    </li>
  </a>

  <a href="#ProductDetail">
   <li>
    <figure>
     <img src="images/ring.jpg" alt="img01">
      <figcaption>
      <h3>Atlas® closed narrow ring in 18k rose gold with a diamond.</h3>
      <span class="price">800</span>
      <a href="#Cart"><span class="add">Add to Shopping Bag</span>
      </figcaption>
     </figure>
    </li>
  </a>

  <a href="#ProductDetail">
   <li>
    <figure>
     <img src="images/ring.jpg" alt="img01">
      <figcaption>
      <h3>Atlas® closed narrow ring in 18k rose gold with a diamond.</h3>
      <span class="price">800</span>
      <a href="#Cart"><span class="add">Add to Shopping Bag</span>
      </figcaption>
     </figure>
    </li>
  </a>

所以我有一段像上面那样的代码，我的css就像

.grid {
padding: 0px 0px 0px 0px;
max-width: 890px;
margin: 0 auto;
list-style: none;
text-align: left;
}

.grid li {
display: inline-block;
width: 278px;
margin: 0px;
margin-right: 10px;
margin-bottom: 10px;
padding: 0px;
text-align: left;
position: relative;
}

.grid li:nth-child(3n+3) {
margin-right: 0px;
}

nth-child伪选择器似乎不起作用。我的第3个＆lt; li>项目仍有保证金。如果有人能指出我到底出了什么问题，我将不胜感激？

非常感谢

Answer 1

删除<a href="#ProductDetail">内的ul个锚标记可以解决您的问题

ul不应该有直接<a>孩子

@BrianDillingham's fiddle

Answer 2

您的选择器无效，因为每个<li>都在<a>标记中，这意味着每个<li>都是其父级的第一个孩子。

首先，您的标记无效。超链接应该在<li>元素内，而不是在它们之外; only <li> can be a direct child of <ul>.

更正后，您可以使用选择器.grid li:nth-child(3n+3)选择每个列表中的第三项。

Answer 3

您li tag内有a tag，但您要将nth-child分配给 li ，这是不正确的。你应该这样做：

.grid a:nth-child(3n+3) li{margin-right: 0px;}

nth-child不适合我的<li>标签</li>

3 个答案: