Question

我需要在每个<div>之前定位每个<h3>。是否有一种编程方式可以在css中完成？

由于其他原因，我不能/不想要定位<h3>。

<div id="main">

    <h3>Title</h3>
    <div class="post">…</div>
    <div class="post"><!-- Target this div--></div>

    <h3>Title</h3>
    <div class="post">…</div>
    <div class="post">…</div>
    <div class="post">…</div>
    <div class="post"><!-- Target this div--></div>

    <h3>Title</h3>
    <div class="post">…</div>
    <div class="post">…</div>
    <div class="post"><!-- Target this div--></div>

</div>

Answer 1

实际上这是不可能的。

如果您能够将块包装成父标记，您可以通过CSS选择器#main .post:last-child获取每个最后一个孩子：

<div id="main">

  <div>               <!-- wrap with "h3" WORKS -->
    <h3>Title</h3>
    <div class="post">…</div>
    <div class="post"><!-- Target this div--></div>
  </div>

  <h3>Title</h3>
  <div>               <!-- wrap without "h3" also WORKS -->
    <div class="post">…</div>
    <div class="post">…</div>
    <div class="post"><!-- Target this div--></div>
  </div>

</div>

注意：IE8及更早版本不支持：last-child选择器。

你是什么意思：“出于其他原因，我不能/不想反对。”？

jQuery 变通方法的工作方式与原始标记完全相同：

var $Main = jQuery('#main');
$Main.find('h3').prev().add( $Main.find(':last') )    //.text('<!-- Target this div-->');

Answer 2

在将来的某个时刻，实施selectors level 4时：

#main div:not(:has(+ div))

定位组中的最后一个div

2 个答案:

实际上这是不可能的。