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

有一个错字。它被称为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 选择器而不是 . 选择器。您在页面上只有一条评论吗？如果答案是否定的，我知道是这样，那么你应该使用类。此外，不要在伪类选择器中包含空格。

你的代码应该看起来像这样

.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 回答