0

以前にこの質問をしましたが、回答が得られませんでした。:(

WordPress 2.7 の新しいコメント ループがあります。CSS に .odd と .even を追加するだけで、コメントの色を交互に変えることができます。

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

ただし、ユーザーがオプション パネルから選択できる、明るい背景と暗い背景の 2 つの異なる背景があります。したがって、上記の背景色は明るい背景に対しては見栄えがよく、暗い背景に対してはあまり良くないため、奇数クラスと偶数クラスの 2 つの異なるバージョンが必要なので、それぞれに異なる色を使用できます。

しかし、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 の 2 つの異なるバージョンを使用するにはどうすればよいでしょうか?

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">'; }

AND 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 に答える