在其他元素之前选择特定元素

Question

我有以下HTML结构：

<div>
  <h2>Candy jelly-o jelly beans gummies lollipop</h2>
  <p>
    Cupcake ipsum dolor sit amet. Sugar plum liquorice dragée oat cake cupcake.
  </p>
  <p>
    Candy tiramisu bonbon toffee. Croissant pudding ice cream soufflé pastry toffee  chocolate bar. Tiramisu wypas tootsie roll icing fruitcake oat cake icing soufflé tiramisu. 
  </p>
  <h2>Dessert pie cake</h2>
  <ul>
    <li>liquorice</li>
    <li>powder</li>
    <li>dessert</li>
  </ul>
  <h2>Chupa chups sweet dragée</h2>
  <p>
    Chocolate cake biscuit pie jelly-o chocolate bar. Marshmallow topping sugar plum apple pie brownie cotton candy dragée lemon drops. Soufflé cake toffee.
  </p>
</div>

我只想选择h2之前的内容ul。我怎样才能做到这一点？在我的内容中，越来越uls多的东西，h2s因此解决方案应该是通用的。

Answer 1

据我所知，CSS没有提供将 在* 选择器 之前定位的任何选择器。您能否将其选择为（）之后的？ *h2``p``p + h2

h2 {
    color: #1a1a1a;
}

p + h2 {
    color: #0cc;
}

如您所见，这可能是您依赖CSS时可以使用的最佳选择器，尽管您可以轻松地向h2之前的每个类添加一个类ul。这样可以避免您在另一个h2段落和段落节之前有一个段落节的情况。

您可以使用jQuery来做到这一点：

.highlight {
    color: #0cc;
}

$('ul').prev('h2').addClass('highlight')

这将选择every ul，然后选择h2之前的，最后将.highlight类添加到其中。