：最后一个孩子的作品，：第一个孩子没有

Question

我有aside个<div class="sku">个元素。我正在尝试使用CSS来操纵:first-child，但它不起作用。但是，在尝试访问:last-child时会这样做。

JSFiddle

HTML

<aside>
  <h1>Product Name</h1>
  <div class="sku">
    <h3>
      100 – Small
    </h3>
    <div class="dimension">
      <ul>
        <li>
          <span class="title">
            Product Dimensions
          </span>
          <span class="specs">
            23.75w
            x
            17.75h
            x
            28d
          </span>
        </li>
      </ul>
    </div>
  </div>
  <div class="sku">
    <h3>
      200 – Large
    </h3>
    <div class="dimension">
      <ul>
        <li>
          <span class="title">
            Product Dimensions
          </span>
          <span class="specs">
            29.75w
            x
            17.75h
            x
            28d
          </span>
        </li>
      </ul>
    </div>
  </div>
</aside>

CSS

.sku:first-child { 
  display:none !important; /*doesn't hide the first child*/
}

.sku:last-child { 
  display:none !important; /*does hide the first child*/
}

为什么:first-child不会选择第一个div？

Answer 1

您不能使用:first-child伪类，因为.sku不是第一个孩子。更好的选择是使用:first-of-type（对于第一个孩子）或:nth-of-type（可以接受数字或等式）伪类：

.sku:nth-of-type(1) {
    display: none;
}

Updated Demo

Answer 2

：第一个孩子意味着第一个孩子。 H1就是这种情况。所以这不起作用。您可以使用：

h1 + .sku { }

但是，只有这是您放置HTML的顺序。