1

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

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

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

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

什么都这样！也许只有第 4 个嵌套块引用有白色边框。

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

这是一个带有几个嵌套块引号的jsfiddle

谢谢！

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

编辑注：

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

4

4 回答 4

1

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

如果可能，我建议将 ID 添加到 blockquote 元素。

更新的 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

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

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

您可以通过检查index == 3

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

于 2013-05-08T02:37:05.790 回答
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 回答