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>