Question

我有一个主题，其中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;}

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

enter image description here

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

我想我可以用CSS实现这个，我之前使用过nth-child标签等......看起来很简单，但我不知道如何使用代码来实现这样。

Answer 1

您可以使用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添加一些逻辑。我说它不值得。：）

CSS样式：在帖子之间改变<blockquote>的颜色？</blockquote>

1 个答案: