Question

我有一个包含一些文字功能的网站，但它确实意味着有很多嵌套的blockquote是可能的。现在我想知道是否有可能让嵌套的blockquotes的样式与彼此不同！

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

这是blockquote样式的简单版本。我的问题是：

我该怎么做才能使得blockquote中的每个其他blockquote都有黑色背景！

任何类似的东西！也许只有第四个嵌套的blockquote有一个白色边框。

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

Here is a jsfiddle with a couple nested blockquotes

谢谢！

P.S。我愿意使用任何4种标记语言，请不要使用php。

编辑注：

我实际上无法向blockquote提供ID，因为它是基于用户的。如果您确实使用ID或类，则必须通过jquery

将其添加到特定的块引用

Answer 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/。拉出所有的块引用，然后相互调整风格。

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

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

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

您可以通过检查index == 3

对此进行扩展以自定义特定元素（假设第4个块引用）

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

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

不同样式的嵌套块引用

4 个答案: