CSS第n个选择答案

【问题标题】：CSS nth selectionCSS第n个选择
【发布时间】：2023-03-25 19:15:02
【问题描述】：

我有 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;
}

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

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

如何做到这一点？

【问题讨论】：

:nth-child(2n + 6)
检查w3.org/TR/selectors
试试p:nth-child(n+3)
试试div > p ~ p ~ p { ... }
你能添加你元素的真实标记吗？

标签： javascript html css css-selectors

【解决方案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>

【讨论】：

只留下第一个项目，我需要离开，第一个和第二个
@SmartestVEGA 它离开了第一个和第二个 .... 第一个是标题，第二个是空的 p .... 就像你的标记
当然@SmartestVEGA 只需在选择器中添加一个，例如：p:nth-of-type(n+4)

【解决方案2】：

您可以使用:nth-child 或:nth-type-of 伪类来实现结果：

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

<div class="right">
<a href="">a link</a>
  <p>heading</p>
  <p>other p</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae nulla asperiores consequuntur quam numquam, fugit iusto, unde necessitatibus ullam nemo natus nobis iste delectus quae tenetur sunt qui odio blanditiis.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio commodi placeat voluptatem dolor, ullam quidem facere incidunt doloribus veritatis culpa nostrum magni tempora possimus consequatur ipsum aperiam ipsam, consectetur unde.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio commodi placeat voluptatem dolor, ullam quidem facere incidunt doloribus veritatis culpa nostrum magni tempora possimus consequatur ipsum aperiam ipsam, consectetur unde.</p>

</div>

This Fiddle

【讨论】：