时间戳

首页 > 解决方案 > 无论兄弟姐妹中的位置如何，如何选择具有特定类的第一个元素？

html - 无论兄弟姐妹中的位置如何，如何选择具有特定类的第一个元素？

问题描述

请检查以下代码。第一种风格完美应用，但不是“常规 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>

标签： htmlcss

解决方案

应该

<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 是具有 THAT CLASS 的第一个孩子，但实际上它是其父级中的第二个孩子

推荐阅读