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不提供任何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类添加到其中。

Answer 2

这样你就可以设计第一个h2元素

h2:first-child { color:red; }

浏览器支持的

在这里阅读： http://www.quirksmode.org/css/contents.html#t17

Answer 3

你应该使用这个

div h2::nth-child(2) {

}

Answer 4

规则h2〜ul将不选择h2，而是ul。因此，您将无法对h2应用任何样式。

CSS element1~element2

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

在固定页脚的情况下，因为我可以在html文件中的main之前声明元素（它将由top / left属性重新定位），所以可以使用〜选择器，例如：footer〜main。但是在页脚不固定的情况下，我发现的唯一方法是在document.ready（）调用中添加一个类。

Answer 5

您可以使用常规兄弟选择器~。

在您的情况下，您可以使用h2~ul ul，该{{1}}将适用于同一父级内{h} {h}之前的h2。

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

5 个答案: