Css ：最后一个孩子工作，：第一个孩子不工作'；T

我有一个

旁边

，有两个

元素。我正试图使用CSS来操纵

：first child

，但它不起作用。但是，当尝试访问

：最后一个子项时，它会执行此操作


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>

为什么不
：first child
选择第一个div？
第一个孩子是指第一个孩子。在这种情况下是H1。所以这是行不通的。您可以使用：

h1 + .sku { }

但仅当这是您放置HTML的顺序时。
您不能使用
:first child
psuedo类，因为
.sku
不是第一个子类。更好的选择是使用
：first of type
（对于第一个孩子）或
：nth of type
（可以接受数字或等式）伪类：

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

请分享您的代码和您的目标。如果没有更多信息，告诉我们某些东西不起作用是没有帮助的。这是因为
.sku
不是
aside
元素的第一个子元素。CSS伪类，如
：第一个孩子
，
：最后一个孩子
，
nth-child（）
，。。。查看父元素的子元素树以匹配正确的子元素，而不是
元素的组合。class
dev.sku
不是第一个子元素-
h3
是。请尝试使用
：第一个类型的
。那么为什么：last child可以工作呢？因为.sky是父元素的最后一个子元素。该级别上有3个元素，
h1+.sku+.sku
，其中：最后一个子元素是最后一个sku。如果在最后一个sku之后有一个h2。它不起作用。@greetification因为CSS伪类都不涉及类名本身，所以我会使用这个相邻的同级选择器，即使在IE7中也支持它。
.sku:nth-of-type(1) {
    display: none;
}