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

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

选择紧邻ul元素之前的h2元素

h2:has(+ul) {
    background-color: #ff0000;
}

参考： https: //developer.mozilla.org/en-US/docs/Web/CSS/ :has

请注意：它不适用于某些浏览器（例如 Firefox），请在此处检查浏览器支持。

Answer 2

据我所知,CSS没有提供任何选择器,它们将在选择器之前定位.你可以选择它h2直接在p(p + h2)之后吗？

h2 {
    color: #1a1a1a;
}

p + h2 {
    color: #0cc;
}

关于JSFiddle的例子

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

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

.highlight {
    color: #0cc;
}

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

关于JSFiddle的例子

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