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

我有以下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>

糖果果冻豆糖果棒棒糖

纸杯蛋糕益普生多乐坐阿梅特。糖李子甘草燕麦蛋糕纸杯蛋糕。


糖果提拉米苏邦邦太妃糖。牛角面包布丁冰淇淋蛋奶酥糕点太妃糖巧克力棒。提拉米苏wypas tootsie roll糖衣水果蛋糕燕麦蛋糕糖衣蛋奶酥提拉米苏。

甜点派蛋糕

甘草
火药
甜点

丘帕咕噜咕噜咕噜咕噜咕噜

巧克力蛋糕饼干派果冻巧克力条。棉花糖、糖、李子、苹果派、布朗尼、棉花糖、柠檬汁。蛋奶酥蛋糕太妃糖。

---

我只想选择在

ul

前面的

h2

。我该怎么做？在我的内容中，有更多的

uls

和更多的

h2s

，因此解决方案应该是通用的。

据我所知，CSS不提供任何在选择器之前针对的选项。您能选择它作为

h2

，它直接位于

p

（

p+h2

）之后吗

如您所见，如果您依赖CSS，这可能是您可以使用的最佳选择器，尽管您可以轻松地在

ul

之前的每个

h2

中添加一个类。这样可以避免在另一个

h2

和段落部分之前有段落部分的情况

可以使用jQuery执行此操作：

.highlight {
    color: #0cc;
}

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

---

这将选择每个

ul

，然后选择它前面的

h2

，最后添加

。突出显示
类。
使用此选项，您可以仅设置第一个h2元素的样式

h2:first-child { color:red; }

有关浏览器支持，请阅读此处：
你应该使用这个

div h2::nth-child(2) {

}

您可以使用常规同级选择器
~

在您的情况下，您可以使用
h2~ul
，它将应用于同一父级中
ul
之前的h2。
规则h2~ul将不选择h2，而是选择ul。因此，您将无法对h2应用任何样式


我在面板位置上也有同样的问题。我有一个元素，后面跟一个。在这种情况下，我希望通过样式应用减少主面板的高度或最小高度（取决于面板是否固定）

在固定页脚的情况下，因为我可以在html文件中的main之前声明元素（它将被顶部/左侧属性重新定位），所以我可以像这样使用~selector:footer~main。但对于非固定页脚的情况，我发现的唯一方法是在document.ready（）调用中添加一个类
 旧浏览器不支持此功能。。在我的内容中有更多的
h2s
和更多的
uls
，所以解决方案应该更通用。不幸的是，它不会。它将应用于同一父级内
ul
之后的所有
h2
。
h2~ul
将h2作为先前同级的任何ul作为目标。这个例子并不针对H2元素。谢谢你的回答。我知道jQuery解决方案，但我想知道它是否可以在纯CSS中实现。我试图在删除链接之前选择第一个锚点，而我不能在内部创建
链接和其他
链接，就像这样
唯一的解决方案是使用jQuery，可能是
div h2::nth-child(2) {

}