我怎样才能 select 第一个 <p> 元素里面 <article> 元素？

Question

但是这里 <article> 元素在第一个 <p> 元素之前还有其他元素我试过 section article p:first-child 和 section article>p:first-child 我认为这是错误的所以请告诉我答案是什么

<section id="news">
  <article>
    <header>
      <h1><a href="item.html">Quisque a dapibus magna, non scelerisque</a></h1>
    </header>
    <img src="http://lorempixel.com/600/300/business/" alt="">
    <p>Etiam massa.</p>
    <p>Dut venenatis.</p>
    <p>Mauroncus lorem eget.</p>
    <footer>
      <span class="author">Dominic Woods</span>
      <span class="tags"><a href="index.html">#politics</a> <a href="index.html">#economy</a></span>
      <span class="date">15m</span>
      <a class="comments" href="item.html#comments">5</a>
    </footer>
  </article>

  <article>
    ......
  </article>

  <article>
    ......
  </article>
</section>

Answer 1

你可以用 article p:first-of-type

解决这个问题

Answer 2

:first-of-type 伪 class 应该完全符合您的要求：

section article>p:first-of-type {
 outline: solid red 1px;
}

<section id="news">
  <article>
    <header>
      <h1><a href="item.html">Quisque a dapibus magna, non scelerisque</a></h1>
    </header>
    <img src="http://lorempixel.com/600/300/business/" alt="">
    <p>Etiam massa.</p>
    <p>Dut venenatis.</p>
    <p>Mauroncus lorem eget.</p>
    <footer>
      <span class="author">Dominic Woods</span>
      <span class="tags"><a href="index.html">#politics</a> <a href="index.html">#economy</a></span>
      <span class="date">15m</span>
      <a class="comments" href="item.html#comments">5</a>
    </footer>
  </article>

  <article>
    ......
  </article>

  <article>
    ......
  </article>
</section>

虽然 :first-child 仅在元素确实是其父元素的第一个子元素时匹配，但 :first-of-type 将匹配第一次出现，即使之前有其他元素。

Answer 3

试试这个

section article > p:first-of-type { background: #121212; color: #fff; }

<section id="news">
  <article>
    <header>
      <h1><a href="item.html">Quisque a dapibus magna, non scelerisque</a></h1>
    </header>
    <img src="http://lorempixel.com/600/300/business/" alt="">
    <p>Etiam massa.</p>
    <p>Dut venenatis.</p>
    <p>Mauroncus lorem eget.</p>
    <footer>
      <span class="author">Dominic Woods</span>
      <span class="tags"><a href="index.html">#politics</a> <a href="index.html">#economy</a></span>
      <span class="date">15m</span>
      <a class="comments" href="item.html#comments">5</a>
    </footer>
  </article>

  <article>
    ......
  </article>

  <article>
    ......
  </article>
</section>

Answer 4

尝试 select 如下所示并更改 p 标签的属性：

section article > p:first-of-type {
 text-align:center;
}

我怎样才能 select 第一个 <p> 元素里面 <article> 元素？

How can I select first <p> element inside <article> element?

html

html-select