0

我有一个主题，其中blockquote标签通过 CSS 采用以下样式

{background-color:-webkit-gradient(linear, left top, left bottom, 
color-stop(0%,#F5FBEF), color-stop(50%,#E0F8E0), color-stop(51%,#E6F8E0), 
color-stop(100%,#F5FBEF)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(bottom, #E0FFE8 12%, #E0FFE7 30%, 
#E5FFEC 49%, #EAFCED 70%, #F5FFF7 100%); /* Chrome10+,Safari5.1+ */;
border-style:solid;border-width:0px;overflow:auto;padding-left:0.9em;
padding-right:0.9em;white-space:pre-wrap;} /* #page */ 
#page{margin:1.8em 2.4em 3.6em 2.4em;}

这样可以清楚地呈现引用的文本部分，如下面的屏幕截图所示

在此处输入图像描述

不过，这在页面的过程中变得有点简单，几个帖子将分享这些绿色部分（http://biochemistri.es）。有没有办法可以在帖子之间交替说绿色和蓝色？我可能在一个帖子中有多个这样blockquote的标签，但不想在一个帖子中交替它们的颜色 - 可能看起来有点乱。

我想我可以用 CSS 来实现它，我以前使用过 nth-child 标记等......看起来很简单，但我不知道如何以这种方式使用帖子代码来做到这一点。

4

1 回答 1

2

您可以使用nth-child伪选择器来选择偶数或奇数元素。这样你就可以为它们添加一些覆盖。

blockquote:nth-child(even) {
  background-color: blue;
}

这在 IE8 中不起作用，但是，嘿，也许他们可以只使用一种颜色。;-)

[编辑]

在阅读@DrydenLong 的评论然后重新阅读您的问题后，我看到您想在帖子之间交替使用块引号，而不是在帖子中交替它们。

这将需要一个稍微不同的选择器。您可以从post每个帖子似乎都有的课程开始：

.post:nth-child(even) blockquote { /* overrides go here */ }

但是在您的 html 代码中，我可以看到奇数的帖子也有一个类post_odd，甚至帖子也有post_even，所以您不妨将其用作选择器：

.post blockquote { /* Defaults go here */ }
.post.post_even blockquote { /* Overrides go here */ }

这些解决方案中的任何一个的缺点是，它根本不会检查帖子是否包含块引用。因此，如果两个帖子之间有一个小的、无引号的帖子，则两个帖子可能都会显示一个绿色的大引号。我认为这不会是一个大问题，但如果是这样，您可能需要在页面生成过程中或使用 Javascript/JQuery 中添加相当多的逻辑。我会说这不值得。:)

于 2013-10-29T21:37:27.403 回答