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 はセレクターの前に対象となるセレクターを提供していません。( )の直後のとして選択していただけますか?h2pp + 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クラスが追加されます。

于 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 に答える
-2

これを使うべきです

div h2::nth-child(2) {

}
于 2012-04-19T09:44:06.770 に答える
-3

一般的な兄弟セレクターを使用できます~。

あなたの場合、同じ親のh2~ul前に h2 に適用されることを使用できます。ul

于 2012-04-19T09:44:29.717 に答える