定义nth-of-type

Question

我有3个相同的div，我想用css更改2：nd中的第一个跨度，但无论如何，我将键入的内容：nth-of-type(2)带有类，或first-of-type带跨度，前两个跨度正在发生变化。我只需要第一个。

这是我的代码

.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

使用直接子选择器>

这样做

请注意，如果您添加了第二个元素（我将其作为样本），则需要直接子选择器>，否则也将选择该元素＆＃39; f第一个范围

基于原始问题编辑的示例代码更新

＆＃13;

＆＃13;

.month24 {
  padding-left: 10px;
}

.info:nth-of-type(2) .price > span:first-child {
  color: #f40;
}

＆＃13;

<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 class="month24">
      <span>85<sup>99</sup></span>
      <span>dollars</span>
    </div>
  </div>
</div>
<div class="info">
  <span>Plan</span>
  <div class="price">
    <span>95<sup>99</sup></span>
    <span>dollars</span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

现在，如果它是info中的第一个跨度，你会喜欢这个

＆＃13;

＆＃13;

.month24 {
  padding-left: 10px;
}

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

＆＃13;

<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 class="month24">
      <span>85<sup>99</sup></span>
      <span>dollars</span>
    </div>
  </div>
</div>
<div class="info">
  <span>Plan</span>
  <div class="price">
    <span>95<sup>99</sup></span>
    <span>dollars</span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要在.info而不是.price

上添加nth-of-type

.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>

Answer 3

您的原始代码运行正常。可以使用>选择器，但:first-of-type也适用。您需要使用三个.info div元素运行它，并使用易于发现的颜色。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

不幸的是，没有办法（至少我不知道）选择类的第n类：

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

您需要手动 。