如何获得每个标题的最后一个孩子？

Question

Suppose this HTML:

<h1>heading</h1>
  <p>foo</p>
  <p>bar</p><!---this should be selected--->

<h1>heading</h1>
  <p>foo</p>
  <p>bar</p>
  <p>foo</p>
  <p>bar</p><!---this should be selected--->

And to select this only with CSS is not possible?

I was trying it like this:

h1 ~ p:last-child /*wouldn't work*/ /* it would select last-child of p*/

Answer 1

That is simply not possible with CSS, as there is no way to select elements backward or up the tree (looking forward to CSS4…). You will have to use one of these:

<section>
    <h1>heading</h1>
    <p>foo</p>
    <p>bar</p><!---this should be selected--->
</section>

( section p:last-child ) Or:

<h1>heading</h1>
<p>foo</p>
<p class="last">bar</p><!---this should be selected--->

( p.last ) Or with JS:

var e = document.getElementsByTagName('h1');
for (var i = 0; i < e.length; i++) {
    var f = e[i].nextSibling;
    while (f && f.tagName == 'P') {
        var n = f.nextSibling();
        if (!n) {
            f.classList.add('last');
        } else {
            f = n;
        }
    }
}

Answer 2

Demo

<div class="span8">
<h1>heading</h1>
  <p>foo</p>
  <p>bar</p>
  <p>foo</p>
  <p>bar</p>
</div>    

  .span8 > p:last-child{ color:red }

Answer 3

If you wrap the content with a div , then it is possible using CSS .

div p:last-child  {
  color:red;
}

See demo

Answer 4

It is possible with Jquery. Here is an example

$(document).ready(function(){
    $('h1').prev('p').addClass('myclass');
})

Learn more about previous and next on this link