html - 定义 nth-of-type

Question

我有 3 个相同的 div，我想用 css 更改第二个中的第一个跨度:第二个跨度，但无论如何，我将键入:nth-of-type(2)对于 class，或者 first-of-type 对于 span，前两个 span 是变化的。我只需要第一个。

这是我的代码

.info:nth-of-type(2) span:first-of-type {
  color: #f4fffe;
}

<div class="info">
  <span>Plan</span>
  <div class="price">
    <span>95<sup>99</sup></span>
    <span>dollars</span>
  </div>
</div>

Answer 1

您需要将 nth-of-type 放在您的 .info 而不是您的 .price 上

.info:nth-of-type(2) .price span:first-of-type {
  color: red;
}

<div class="info">
  <span>Plan</span>
  <div class="price">
    <span>95<sup>99</sup></span>
    <span>dollars</span>
  </div>
</div>
<div class="info">
  <span>Plan</span>
  <div class="price">
    <span>95<sup>99</sup></span>
    <span>dollars</span>
  </div>
</div>
<div class="info">
  <span>Plan</span>
  <div class="price">
    <span>95<sup>99</sup></span>
    <span>dollars</span>
  </div>
</div>