css - 我们如何使用 CSS 选择整个文档中第一次出现的元素

Question

This问题难住了我

假设我们有这样的结构

<!-- Elements can be dynamic -->
<div>
  <section>

  </section>
  <section>
    <p>1st Para</p>
  </section>
  <section>
    <p>2nd Para</p>
  </section>
  <section>

  </section>
</div>

现在在这种情况下，我如何只选择 p 元素的第一个实例？

注意:部分可以是动态的

div section:nth-of-type(2) p {
   /* This won't work */
}

Answer 1

单独使用 CSS 是不可能的。你提到元素是动态生成的，如果是这样的话，我会以编程方式在第一个 <p> 上放置一个类。并以此为目标。

通过这样做，您还可以确保跨浏览器的兼容性；因为如果它是是可能的，那么您肯定必须使用 CSS3 伪类。