Question

我需要你的帮助，如何为我的评论系统替换背景颜色。因此红色和蓝色将交替用于其他每个元素。到目前为止，这正是我想要做的工作，但没有成功。

感谢您的时间和耐心。

  #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;
    }

Answer 1

有一个错字。它在第二个选择器中称为background-color，而不是bacground-color。

Answer 2

更改背景拼写

尝试这样的事情

            <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>

Answer 3

示例：

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

希望这有帮助！

Answer 4

我看到一些可能出错的事情。

首先，确保您使用的是支持此CSS3规则的浏览器。

其次，你正在使用#CSC选择器而不是。选择。你在这个页面上只有一个评论吗？如果答案是否定的，我知道它是，那么你应该使用类。另外，不要在伪类选择器中包含空格。

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

.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;
}

我的评论系统的交替背景颜色

4 个答案: