CSS第n选择

时间:2016-11-28 13:33:20

标签: javascript html css css-selectors

我有4段/a/b/c/ # nothing, pathname ends with the dir 'c' c:\windows\ # nothing, pathname ends with the dir 'windows' c:hello.txt # matches potential filename 'hello.txt' ~it_s_me/.bashrc # matches potential filename '.bashrc' c:\windows\system32 # matches potential filename 'system32', except # that is obviously a dir. os.path.is_dir() # should be used to tell us for sure 。我需要选择每个段落,除了在这个结构上留下前两段:

<p>

我在下面写了css,

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

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

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

如何实现这个目标?

2 个答案:

答案 0 :(得分:6)

您可以改用: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>

答案 1 :(得分:0)

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

&#13;
&#13;
.right p:nth-of-type(n + 3) {
  background: green;
}
&#13;
<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>
&#13;
&#13;
&#13;

This Fiddle