0

我早些时候问过这个问题，但没有得到回应。:(

我有新的 WordPress 2.7 评论循环，我知道您可以简单地将 .odd 和 .even 添加到您的 CSS 以获得交替的评论颜色，我已经这样做了：

.odd { background: #ccc; color: #000; }
.even { background: #bbb; color: #000; }

但是，我有两种不同的背景 - 浅色和深色 - 用户可以从选项面板中进行选择。因此，我需要两个不同版本的奇数类和偶数类，这样我就可以为每个类设置不同的颜色，因为上述背景颜色在浅色背景下看起来不错，但在深色背景下不太好。

但是使用 2.7 注释循环，奇数类和偶数类实际上并不存在于代码中。如果他们是，我会做这样的事情：

$background = get_option('mytheme_background');
if ($background== "option1") { echo '<div class="odd-dark">'; } 
if ($background== "option1") { echo '<div class="even-dark">'; }
if ($background== "option2") { echo '<div class="odd-light">'; } 
if ($background== "option2") { echo '<div class="even-light">'; }

因此，由于 .odd 和 .even 实际上并不存在于代码中，我如何才能在 CSS 中拥有两个不同的 .odd 和 .even 版本？

4

2 回答 2

1

PHP：

$background = get_option('mytheme_background');
// no more - between class names to use specializations of odd/even in CSS
if ($background== "option1") { echo '<div class="odd dark">'; } 
if ($background== "option1") { echo '<div class="even dark">'; }
if ($background== "option2") { echo '<div class="odd light">'; } 
if ($background== "option2") { echo '<div class="even light">'; }

和 CSS：

/* now specialize 2 variants for each type odd/even * dark/light */
.odd.light { background: #ccc; color: #000; }
.even.light { background: #bbb; color: #000; }
.odd.dark { background: #ccc; color: #000; }
.even.dark { background: #bbb; color: #000; }

试试这个。

于 2012-10-29T18:51:02.937 回答
0

您可以结合使用 CSS 类：

echo '<div class="even option1">';
echo '<div class="even option2">';
echo '<div class="odd option1">';
echo '<div class="odd option2">';

在 CSS 文件中，您指定：

.option1.even { background-color: #bbb; color: black; }
.option1.odd { background-color: #ccc; color: black; }
.option2.even { background-color: #222; color: snow; }
.option2.odd { background-color: #444; color: white; }

或者，您可以将 CSS 类option1应用于您的body元素。如果您不得不用 标记许多元素，这将特别有用class="option1 …"：

<body class="option1">
    <div class="even">…&lt;/div>
</body>

在 CSS 中：

body.option1 .even { /* … */ }

等等。option1注意和之间有一个空格.even。

于 2012-10-29T18:58:29.267 回答