Question

假设这个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--->

并且只能用CSS选择它？

我是这样尝试的：

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

Answer 1

这对CSS来说根本不可能，因为没有办法向后或向上选择元素（期待CSS4 ......）。您将不得不使用以下其中一个：

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

（section p:last-child）或：

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

（p.last）或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

如果您使用div打包内容，则可以使用CSS。

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

See demo

Answer 4

Jquery可以。这是example

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

详细了解此link

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

4 个答案: