34

我有以下 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解决方案应该是通用的。

4

5 回答 5

31

据我所知，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 上的示例

这会选择 every ul，然后选择h2它之前的那个，最后将.highlight类添加到它之前。

于 2012-04-19T09:42:38.153 回答
0

有了这个，你可以只设计第一个 h2 元素

h2:first-child { color:red; }

浏览器支持在这里阅读： http ://www.quirksmode.org/css/contents.html#t17

于 2012-04-19T09:43:05.000 回答
0

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

CSS元素1~元素2

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

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

于 2019-04-28T07:01:18.717 回答
-2

你应该使用这个

div h2::nth-child(2) {

}
于 2012-04-19T09:44:06.770 回答
-3

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

在您的情况下，您可以使用h2~ul它将应用于ul同一父级之前的 h2 。

于 2012-04-19T09:44:29.717 回答