6

アコーディオンスタイルの機能を備えたHTMLページを作成しようとしています。まず、この単純なCSSセレクターを使用して、「H1が次のH1の直後にある場合は、背景を赤にします」と述べています。

<style type="text/css">
    h1 + h1 
    {
        background-color: red;
    }
</style>

次に、いくつかのプレーンHTML：

<h1>First</h1>
<p>Blah, blah...</p>
<h1>Second</h1>
<p>Blah, blah...</p>
<h1>Third</h1>
<p>Blah, blah...</p>

すべてのH1は本来あるべきように見えますが、前にPタグが付いているため、背景が赤いものはありません。

このため：

<h1>First</h1>
<h1>Second</h1>
<p>Blah, blah...</p>
<h1>Third</h1>
<p>Blah, blah...</p>

2番目のH1と前のH1の間のPタグが削除されているため、2番目のH1の背景は赤になっています。非常に素晴らしい。

さて、私が実際にやりたいのは、プログラムでH1の下の「コンテンツ」を非表示にすることです。次に、レッドルールが開始されるのを確認します。次のようになります。

<h1>First</h1>
<p>Blah, blah...</p>
<h1>Second</h1>
<p style="display: none">Blah, blah...</p>
<h1>Third</h1>
<p>Hello world...</p>

ただし、Pタグはまだ存在するため、CSSルールは3番目のH1には適用されず、赤い背景はありません。

質問：JavaScriptを使用してPタグに何かを適用し、CSSルールによって（一時的に）無視されるようにする方法はありますか？

4

2 に答える 2

3

ああ、質問を書いているときに思いついた。したがって、将来の参考のために、これが私自身の解決策です：

赤い背景の2番目のルールを追加し、「H1の後にH1を追加するか、「非表示」クラスが設定されたタグの後にH1を追加する」と記述します。

h1 + h1, .hidden + h1
{
    background-color: red;
}

そして、単純な非表示クラス：

.hidden
{
    display: none;
}

次に、コンテンツのPタグに「非表示」クラスを追加するだけです。

<h1>First</h1>
<p>Blah, blah...</p>
<h1>Second</h1>
<p class="hidden xxx">Blah, blah...</p>
<h1>Third</h1>
<p>Hello world...</p>

ヴィオラ、3番目のH1は赤です。:)そして私はコンテンツPタグに必要な他のクラス（「xxx」）を適用することができます。

于 2013-01-25T06:21:26.420 に答える
2

これは、インラインスタイルを使用してコンテンツを非表示にする場合に機能するはずです。

h1 + h1, p[style*="display: none"] + h1 {
    background-color: red;
}

デモを確認してください：http ：//jsfiddle.net/qFyUc/

于 2013-01-25T06:22:22.363 に答える