如何选择最后一个段落元素，如果没有其他元素跟在她后面？(CSS选择器问题)

c0vxltue 于 2023-05-30 发布在其他

关注(0)|答案(3)|浏览(166)

如何选择最后一个段落<p>元素，当且仅当它是<article>元素的最后一个也是最低的HTML元素？
我不想使用.classes或#id's。CSS选择器应该自动查找并选择<p>元素。
在我的演示中，在第一部分中，应该选择最后一个<p>元素，而在第二部分中，不应该选择最后一个<p>元素。

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>

css

来源：https://stackoverflow.com/questions/72378300/how-to-select-the-last-paragraph-element-only-if-no-other-elements-follow-after

3条答案

按热度按时间

mwg9r5ms1#

给你一些选择。选择第一个article子元素。

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>

赞(0）回复(0）举报 2023-05-30

s2j5cfk02#

在CSS中添加first-of-type到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>

赞(0）回复(0）举报 2023-05-30

9rbhqvlz3#

编辑：您可以在您的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>

赞(0）回复(0）举报 2023-05-30

我来回答

如何选择最后一个段落元素，如果没有其他元素跟在她后面？(CSS选择器问题)

3条答案

相关问题

热门标签

最新问答