Question

请检查以下代码。第一种样式完全适用，但第二种样式不适用于“常规1”样式。我必须在“常规”类的第一个元素上应用蓝色。

.plan-list .basic:first-child {
    background: red;
  }
  .plan-list .regular:first-child {
    background: blue;
  }

<ul class="plan-list">
  <li class="plan basic">basic 1</li>
  <li class="plan regular">regular 1</li>
  <li class="plan regular">regular 2</li>
  <li class="plan basic">basic 2</li>
</ul>

Answer 1

应该是

<style>
  .plan-list .basic:first-child {
    background: red;
  }
  .plan-list .regular:nth-child(2) {
    background: blue;
  }
</style>

<ul class="plan-list">
  <li class="plan basic">basic 1</li>
  <li class="plan regular">regular 1</li>
  <li class="plan regular">regular 2</li>
  <li class="plan basic">basic 2</li>
</ul>

这是因为，虽然这个li是第一个拥有该类的孩子，实际上是其父母中的第二个孩子

Answer 2

设置first-child时，从字面上看，它必须是其first child的{{1}}。

因此，您正在尝试选择类别为parent AND 的元素，该元素是其regular的{{1}}。

Answer 3

只需添加来自MDN文档的其他答案即可：：first-child CSS伪类表示一组同级元素中的第一个元素。

我如何选择具有特定类的第一个元素而不管兄弟姐妹之间的位置如何？

3 个答案: