在CSS中嵌套伪类

Question

我试图访问一个元素的最后一次出现，以及该元素中另一个元素的第一次出现。 因此，我试图访问最后一个文章标签和后面的第一个p标签，我知道我可以使用 "last-child "来访问最后一篇文章，但是否可以嵌套另一个p标签？

    <div class = "wrapper">
        <article class = "article-info">
            <h3>Test1</h3>
            <p>Lorem Ipsum.</p>
        </article>
        <article class = "article-info">
            <h3>Test2</h3>
            <p>Lorem Ipsum.</p>
        </article>
        <article class = "article-info">
            <h3>Test3</h3>
            <p>Lorem Ipsum.</p>
        </article>
    <div/>

我知道我可以通过使用 "last-child "来访问最后一个文章，但是否可以嵌套另一个伪类来访问第一个p元素？谢谢！我想访问最后一篇文章，使用'last-child'。

Answer 1

你可以使用 :last-of-type 和 :first-of-type. 即使在最后一个元素后面有一个 article 或之前 p 标签

.wrapper article:last-of-type p:first-of-type {
  background: red;
}

<div class="wrapper">
  <article class="article-info">
    <h3>Test1</h3>
    <p>Lorem Ipsum.</p>
  </article>
  <article class="article-info">
    <h3>Test2</h3>
    <p>Lorem Ipsum.</p>
  </article>
  <article class="article-info">
    <h3>Test3</h3>
    <p>Lorem Ipsum.</p>
    <p>Lorem Ipsum.</p>
  </article>
  <div>Hello</div>
  <div/>