3

h1タグ間の要素を選択したいです。たとえば、h1#bap と次の h1 の間のすべての p にスタイルを適用し、他の場所ではスタイルを変更したくありません。

他のタグを追加する必要はありません (そうしないと、簡単すぎます :) )。

ヘッダー間の要素は数兆になる可能性があるため、n 番目の兄弟を使用することはできません。

明らかに、他のヘッダー間 (特定の h2 間など) にもスタイルを適用したい場合があります。

<h1 id="bap">bap</h1>
  <p>foo bap</p>
  <p>foo bap 1</p>
  <p>foo bap 2</p>
  <p>foo bap 3</p>
  <p>foo bap 4</p>
  <div>defoo bap</div>
<h1 id="random-bor">random bor</h1>
  <p>balibom</>p
4

4 に答える 4

4

正式にはSiblingコンビネータと呼ばれるあまり知られていないセレクターを使用できます（まあ、とにかくそれが名前だと思います！）

この構文を使用すると、次の後にすべてのp要素を選択できます<h1 id="bap">bap</h1>。

#bap ~ p { color: red; }

残念ながら、これは後にすべての段落要素を選択します<h1 id="random-bor">random bor</h1> が、これは次のようにそれらの段落要素のスタイルをリセットすることで克服できます。

#random-bor ~ p { color: black; }

このフィドルを見る

これは最新のすべてのブラウザで機能しますが、残念ながらIE6では機能しません。それが問題である場合は、jQueryソリューションがおそらく最適です。

于 2012-09-12T12:16:41.237 に答える
1

<div>他のタグを追加してはいけないとあなたが言ったところを読むまで、各セクションの周りにいくつかの s を追加することを提案するつもりでした。

css だけではできませんが、JavaScript を使用してこのアルゴリズムを実装できます。

  1. ページのすべての要素をループします。
  2. が表示されたら<h1>、それが id であることを思い出してください。
  3. すべての について、最後の id<p>に対応するクラスを指定します。<h1>

css で簡単にスタイルを設定できるはずです。

<h1 id="bap">bap</h1>
  <p class="bap">foo bap</p>
  <p class="bap">foo bap 1</p>
  <p class="bap">foo bap 2</p>
  <p class="bap">foo bap 3</p>
  <p class="bap">foo bap 4</p>
  <div>defoo bap</div>
<h1 id="random-bor">random bor</h1>
  <p class="random-bor">balibom</>p

次に、次のようなスタイルを設定できます。

p.bap {}
p.random-bor {}
于 2012-09-12T12:05:34.990 に答える
1 
h1#bap + p{color:red}​

これは最初の p タグで機能します。すべてのタグに適用する方法を見つける必要があります。とりあえずゲットしたのはこれ

于 2012-09-12T11:56:26.700 に答える
0

javascriptでのみ実行できます。jqueryを使用している場合は、次のようになります。

$('h1#bap').nextUntil("h1#random-bor",'p').css('background','red');

編集：

jQueryで2つのタグ間のすべてのコンテンツを選択する方法

これはあなたがやりたいことを正確に説明しています

Edit2：

jquery関数もあります http://api.jquery.com/nextUntil/

于 2012-09-12T11:48:33.503 に答える