如何 select 仅在她之后没有其他元素的情况下才使用最后一段元素？（CSS select或问题）

Question

如何 select 最后一段 <p> 元素，如果且仅它是 <article> 元素的最后和最低 HTML 元素？

我不想使用 .classes 或 #id's。
CSS select 或应该自动找到 select <p> 元素。

在我的演示中，在第一部分中，最后一个 <p> 元素应该 selected，而在第二部分中，最后一个 <p> 元素不应该 [=38] =]ed.

谢谢指路。

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>

Answer 1

编辑：您可以在

上的 p 标签上使用 :last-child

Documentation

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>

Answer 2

一些选项供您选择。主要选择第一个articlechild.

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>

版本 2：

column:last-of-type p:last-child {
  background-color: 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>
     <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>
  </column>

  <hr>

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

Answer 3

只需将 first-of-type 添加到 CSS

中的 article

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>

如何 select 仅在她之后没有其他元素的情况下才使用最后一段元素？（CSS select或问题）

How to select the last paragraph element ONLY if no other elements follow after her? (CSS selector question)

html

css

layout

css-selectors

selector

如何 select 仅在她之后没有其他元素的情况下才使用最后一段元素？ （CSS select或问题）

How to select the last paragraph element ONLY if no other elements follow after her? (CSS selector question)

html

css

layout

css-selectors

selector

如何 select 仅在她之后没有其他元素的情况下才使用最后一段元素？（CSS select或问题）