如何選擇最后一段& ltp & gt元素，當(dāng)且僅當(dāng)它是& lt文章& gt元素？

我不想用。類別或#id。CSS選擇器應(yīng)該自動(dòng)找到并選擇& ltp & gt元素。

在我的演示中，在第一部分，最后一個(gè)& ltp & gt元素，而在第二部分中，最后一個(gè)& ltp & gt不應(yīng)選擇元素。

article p:last-of-type{
    background: yellow;
  }

<article>
   <column>
     <p>Text</p>
     <p>Text</p>
     <p>Text</p>
     <p>This paragraph should <b>NOT</b> be selected, if this would be the last paragraph on a page.</p>
     <div>Text</div>
     <div>Text</div>
  </column>

  <hr>

  <column>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>This paragraph <b>SHOULD</b> be selected, if this was the last paragraph on the page.</p>
  </column>
</article>

給你一些選擇。選擇第一個(gè)孩子的主要事情。

article:nth-child(1) p:last-of-type {
  background: yellow;
}

article:nth-child(1) p:last-child {
  background: yellow;
}

article:first-of-type p:last-of-type {
  background: yellow;
}

article:first-child p:nth-child(4) {
  background: yellow;
}

article:first-child p:last-of-type {
  background: yellow;
}

article:first-child p:last-child {
  background: yellow;
}

<article>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>This paragraph <b>SHOULD</b> be selected.</p>
</article>

<br><br>
<hr><br><br>

<article>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>But this paragraph should <b>NOT</b> be selected.</p>
  <div>Text</div>
  <video src="/ufo landing right in the middle of a demonstration full hd footage.mpg" alt="" />
  <img src="/ufo interview with human in 12k resolution.mpg" />
  <div>Text</div>
</article>

只需在CSS中添加第一類型的文章

article:first-of-type p:last-of-type{
    background: yellow;
  }

<article>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>This paragraph <b>SHOULD</b> be selected.</p>
</article>

<br><br><hr><br><br>

<article>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>But this paragraph should <b>NOT</b> be selected.</p>
  <div>Text</div>
  <video src="/ufo landing right in the middle of a demonstration full hd footage.mpg" alt="" />
  <img src="/ufo interview with human in 12k resolution.mpg" />
  <div>Text</div>
<etcettera>

</article>

編輯: 你可以在你的p標(biāo)簽上使用:last-child

證明文件

column p:last-child{
    background: yellow;
  }

<article>
   <column>
     <p>Text</p>
     <p>Text</p>
     <p>Text</p>
     <p>This paragraph should <b>NOT</b> be selected.</p>
     <div>Text</div>
     <div>Text</div>
  </column>

  <hr>

  <column>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>This paragraph <b>SHOULD</b> be selected.</p>
  </column>
</article>