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

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>

我只想选择 ul 之前的 h2。我怎样才能做到这一点？在我的内容中有更多的 uls 和更多的 h2s 所以解决方案应该是通用的。

Answer 1

据我所知，CSS 不提供任何 selectors这将针对选择器之前。你能选择它作为一个h2吗？紧接在 p 之后( p + h2 )?

h2 {
    color: #1a1a1a;
}

p + h2 {
    color: #0cc;
}

Example on JSFiddle

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

你可以使用 jQuery 做到这一点:

.highlight {
    color: #0cc;
}

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

Example on JSFiddle

这会选择每个 ul , 然后选择 h2那是在它之前，在最后添加 .highlight 之前类。