仅当我的元素是容器的第一个子元素时才具有特殊属性

Question

我有一个设置了顶部和底部边距的元素。它还可以通过其容器内的设置来改变位置。因此它可以是其容器的第一个子级，也可以是最后一个子级。但当它是第一个孩子时，我希望它的上边距为 0。

问题是没有一个 CSS 组合器选择第一个子项。我可以使用第一个子级伪类，但我不希望任何第一个子级将其上边距设置为 0。只有这个特定的。那么我怎样才能实现这个目标呢？

Answer 1

您仍然可以使用

:first-child

伪类选择器，但为该特定元素提供一个以不同方式标识它的类，并且仅在它是

:first-child

时才应用样式，如下所示：

p {
  font-weight: bold;
}

li{
  margin-top: 5px;
  margin-bottom: 5px;
  
}

li.special:first-child {
  margin-top: 50px;
}

<p>NBA players with most championships:</p>
<ul>
  <li class="special">Bill Russell</li>
  <li>Sam Jones</li>
  <li>Tom Heinsohn</li>
  <li>K. C. Jones</li>
  <li>Satch Sanders</li>
  <li>John Havlicek</li>
  <li>Jim Loscutoff</li>
  <li>Frank Ramsey</li>
  <li>Robert Horry</li>
</ul>