javascript - CSS 第 n 次选择

Question

我有 4 个段落 <p> .我需要选择除保留此结构上的前两段之外的所有段落:

<div class="right">
  <a></a>
  <p>heading</p>
  <p></p>
  <p style="margin-bottom:6.0pt;vertical-align:baseline;">
    <span style="color:#2F2F2F ;">hi....Each day the world meets your expectations. It's no secret that your perspective shapes your experience.
    What's remarkable, however, is how belief builds awareness; and how with every insight, doors open, new futures unfold 
    and once-only-dreamed-of possibilities become everyday realities.</span>
  </p>
  <p style="margin-bottom:6.0pt;vertical-align:baseline;">
    <span style="color:#2F2F2F ;">Each day the world meets your expectations. It's no secret that your perspective shapes your experience.
    What's remarkable, however, is how belief builds awareness; and how with every insight, doors open, new futures unfold 
    and once-only-dreamed-of possibilities become everyday realities.</span>
  </p>

  <p style="margin-bottom:6.0pt;vertical-align:baseline;">
    <span style="color:#2F2F2F ;">Each day the world meets your expectations. It's no secret that your perspective shapes your experience.
    What's remarkable, however, is how belief builds awareness; and how with every insight, doors open, new futures unfold 
    and once-only-dreamed-of possibilities become everyday realities.</span>
  </p>
</div>

我在下面写了css，

.right p:not(:nth-child(4)){
  background:yellow;
}

但它只选择第一、第三和第四。

但是我们只需要第三和第四，而不是第一和第二

如何实现？

Answer 1

你可以使用 :nth-of-type相反，试试这个:

.right p:nth-of-type(n+3) {
  background:yellow;
}

<div class="right">
  <a href="#">I'm a link</a>
  <p>heading</p>
  <p>empty p</p>
  <p style="margin-bottom:6.0pt;vertical-align:baseline;">
    <span style="color:#2F2F2F ;">hi....Each day the world meets your expectations. It's no secret that your perspective shapes your experience.
What's remarkable, however, is how belief builds awareness; and how with every insight, doors open, new futures unfold 
and once-only-dreamed-of possibilities become everyday realities.</span>
  </p>
  <p style="margin-bottom:6.0pt;vertical-align:baseline;">
    <span style="color:#2F2F2F ;">Each day the world meets your expectations. It's no secret that your perspective shapes your experience.
What's remarkable, however, is how belief builds awareness; and how with every insight, doors open, new futures unfold 
and once-only-dreamed-of possibilities become everyday realities.</span>
  </p>

  <p style="margin-bottom:6.0pt;vertical-align:baseline;">
    <span style="color:#2F2F2F ;">Each day the world meets your expectations. It's no secret that your perspective shapes your experience.
What's remarkable, however, is how belief builds awareness; and how with every insight, doors open, new futures unfold 
and once-only-dreamed-of possibilities become everyday realities.</span>
  </p>
</div>