1

私はいくつかのテキスト機能を備えたサイトを持っていますが、多数のネストされたblockquotes が可能であることを意味します。今、ネストされたブロッククォートのスタイルを互いに異なるものにすることが可能かどうか疑問に思っています!

blockquote{
    background-color:#666;
    color:#fff;
    border:1px #000 solid;
}

これはブロック引用スタイルの単純なバージョンです。私の質問は次のとおりです。

ブロック引用内の他のすべてのブロック引用が代わりに黒の背景を持つようにするにはどうすればよいですか!

そのようなものは何でも！おそらく、ネストされた 4 番目のブロック引用だけが白い境界線を持っています。

ネストされた引用符を操作できることだけでも、私にとって非常に便利です!

これは、いくつかのネストされたブロッククォートを持つ jsfiddle です

ありがとう！

PS 私は 4 つのタグ付き言語のいずれかを使用することにオープンです。php は使用しないでください。

編集注:

blockquoteユーザーに基づいているため、実際に s に id を与えることはできません。ID またはクラスを使用する場合は、jquery を介して特定の引用符に追加する必要があります

4

4 に答える 4

1

この場合、特定の引用符が入れ子になっているだけで、ID やクラスがない場合、特定の引用符をターゲットにするのは困難です。しかし、フィドルのこのフォークを見てください: http://jsfiddle.net/m4zyR/。これはあなたが探しているものですか？

可能であれば、blockquote 要素に ID を追加することをお勧めします。

更新された CSS:

    blockquote{
    background-color:#666;
    color:#fff;
    border:1px #000 solid;
}

blockquote blockquote{
    background-color: white;
    color:#fff;
    border:1px #000 solid;
}

blockquote blockquote blockquote{
    background-color: red;
    color:#fff;
    border:1px #000 solid;
}

または、このフィドルのように JQuery を使用します: http://jsfiddle.net/m4zyR/1/。すべての引用符を引き出してから、すべてのスタイルを設定します。

于 2013-05-08T02:08:31.250 に答える
1

少し面倒ですが、次のようなパターンに従うことができます。

blockquote{
    background-color:#666;
    color:#fff;
    border:1px #000 solid;
}

blockquote blockquote {background: red;}

blockquote blockquote blockquote {background: green;}

blockquote blockquote blockquote blockquote {background: blue;}
于 2013-05-08T02:10:33.083 に答える
0

デモ: http://jsfiddle.net/GqUwW/3/

HTML:

<blockquote id="b1">Blockquote
    <blockquote id="b2">Blockquote
        <blockquote id="b3">Blockquote
            <blockquote id="b4">Blockquote</blockquote>
        </blockquote>
    </blockquote>
</blockquote>

CSS:

blockquote {
    color:#fff;
    border:1px #000 solid;
}
#b1 {
    background-color:#666;
}
#b2 {
    background-color:#f00;
}
#b3 {
    background-color:#0f0;
}
#b4 {
    background-color:#00f;
}
于 2013-05-08T02:09:43.283 に答える