0

コメント システムの背景色を変更する方法を教えてください。赤と青が他の要素ごとに交互になるようにします。これまでのところ、これは私が機能させようとしているものですが、成功していません。

お時間をいただきありがとうございます。

  #comment :nth-child(odd) {
     background-color: red;
   }

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


     #comment {
    color: green;
    margin: 5px auto;
    padding: 5px auto
     width: 100px;
    }
4

4 に答える 4

1

タイプミスがあります。2 番目のセレクターではbackground-colorなく、と呼ばれます。bacground-color

于 2012-05-04T19:09:00.393 に答える
0

背景のスペルを変更する

このようなことを試してください

            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Test Document</title>
            <style type="text/css">

            #comment tr:nth-child(even) {background:blue}
            #comment tr:nth-child(odd) {background: red}
                 #comment {
                color: green;
                margin: 5px auto;
                padding: 5px auto
                 width: 100px;
                }
            </style>
            </head>
            <body>
            <table id="comment">

            <tr>
            <td>test</td>
            </tr>

            <tr>
            <td>test1</td>
            </tr>

            <tr>
            <td>test2</td>
            </tr>

            <tr>
            <td>test3</td>
            </tr>

            </table>
            </body>
            </html>
于 2012-05-04T19:21:07.173 に答える
0

例：

HTML

<div id="comment">
  <div>comment 1</div>
  <div>comment 2</div>
</div>

CSS

#comment div:nth-child(odd){background-color:#ff0000;}
#comment div:nth-child(even){background-color:#0000ff;}

nth-child をサポートしていないブラウザーに対応するには、.odd および .even クラスを使用し、javascript および modernizr などの機能検出を使用してそれらを追加することもできます。

CSS を説明するには:

#comment is the parent
div is the child
:nth-child specifies which of these children to apply the rule to

お役に立てれば！

于 2012-05-04T20:14:23.400 に答える
-1

これには問題がある可能性があることがいくつかあります。

まず、この CSS3 ルールをサポートするブラウザーを使用していることを確認してください。

次に、. の代わりに # CSS セレクターを使用しています。セレクタ。ページにコメントが 1 つだけありますか? 答えが「いいえ」の場合は、クラスを使用する必要があります。また、疑似クラス セレクターにスペースを含めないでください。

コードはおそらく次のようになります

.comment tr:nth-child(even)
{
      background-color: blue;
}

.comment tr:nth-child(odd)
{
      background-color: red;
}

.comment tr
{
    color: green;
    margin: 5px auto;
    padding: 5px auto
    width: 100px;
}
于 2012-05-04T19:26:33.957 に答える