Rails：样式动态生成奇数偶数

Question

以下是论坛应用程序中帖子的屏幕截图。我想将奇数帖子设置为与偶数帖子不同的颜色，这就是论坛应用程序设置这种方式的原因。

只是为了确保我可以使样式正常工作

#posts {background-color: #e8d1d1; }

并且正如预期的那样，整个背景改变了颜色。

然而，如果我这样做

.post odd {background-color: #e8d1d1; }

我什么都没得到

如果我这样做

#posts .post odd {background-color: #e8d1d1; }

我也没有风格。

事实上，即使我做了

#posts #post_1 .post odd {background-color: #e8d1d1; }

我也没有风格。但如果确实有效，那就不能真正解决我的问题，因为我不想手动输入帖子的数量（即post_1等）

Answer 1

odd和even行是样式概念，不应在Rails或HTML中实现。尝试仅在CSS中实现此功能。

.post:nth-child(odd)  { /* ... */ }
.post:nth-child(even) { /* ... */ }

Answer 2

class对HTML标记进行了空间分隔，因此class="post odd"会导致HTML标记从.odd和.post继承css。

要解决此问题，只需在css .class声明中添加下划线，使其成为

.post_odd {background-color: #e8d1d1; }

然后它应该工作。

Answer 3

如果你想以Rails方式进行，你应该使用cycle。

如果要在这些之间删除/添加元素，CSS选项会更好。这样就可以保留背景颜色。

EDIT ::

误读了这个问题：这是样式问题，与rails

无关

#posts .post.odd { background-color: #e8d1d1; }

Answer 4

首先，我认为你可以删除锚标签，因为每个帖子都可以通过div id到达（即＃post-1，＃post-2引用div标签的id，而不是锚的名称标签）

其次，你尝试过的每一种风格都是错误的：

.post odd {background-color: #e8d1d1; }

尝试使用类post标记另一个标记内的标记。

<div class="post"><odd>blah blah blah</odd></div> 

看到问题？没有“奇怪的”标签

尝试以下方法：

#posts .post { border: 1px solid #000; }
#posts .odd { background: red; }
#posts .even { background: green; }

一旦你完成了工作（没有理由它不应该）修复背景颜色（lol）并按照你想要的样式设置它。