不同样式的嵌套块引用

Question

我有一个带有一些文本功能的网站，但这确实意味着可以嵌套大量 blockquotes。现在我想知道嵌套块引用的样式是否可以彼此不同！

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

所以这是块引用样式的简单版本。我的问题是这样的：

我该怎么做才能使块引用中的每个其他块引用都具有黑色背景！

这样的！可能只有第 4 个嵌套块引用有白色边框。

能够操作嵌套的块引用对我来说非常有用！

Here is a jsfiddle with a couple nested blockquotes

谢谢！

附：我愿意使用 4 种标记语言中的任何一种，请不要使用 php。

编辑说明：

我实际上无法为blockquotes 提供 ID，因为它是基于用户的。如果确实使用了 ID 或 Classes，则必须通过 jquery 将其添加到特定的块引用中

Answer 1

这使用 jquery 将特定的 css 类应用于每个偶数 blockquote：

$('blockquote').each(function(index, element){
     if(index % 2 == 0) { $(element).addClass('even'); }
 });

您可以通过检查 index == 3 来扩展此功能以自定义特定元素（比如说第 4 块引用）

这应该可以为您省去编写和维护额外 CSS 或在 html 元素上设置静态、任意 ID 的麻烦。这是一个 JS fiddle 来说明：http://jsfiddle.net/ncnre/7/

Answer 2

你可以遵循这样的模式，虽然有点乱：

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;}

Answer 3

在这种情况下，如果它们只是嵌套并且没有 ID 或类，则定位特定的块引用会更加困难。但是看看你的小提琴的这个分支：http://jsfiddle.net/m4zyR/。这是你要找的吗？

如果可能，我建议将 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/。拉出所有块引用，然后每隔一个设置样式。

Answer 4

演示：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;
}