如何使用 CSS 更改备用按钮的颜色？答案

【问题标题】：How to change colors for alternate buttons using CSS?如何使用 CSS 更改备用按钮的颜色？
【发布时间】：2012-03-13 04:16:00
【问题描述】：

我有以下代码。我有两个按钮的背景图像 - “lightSquare.jpg”和“darkSquare.jpg”。目前，所有按钮都有名为“darkSquare.jpg”的背景图像。我想做的是让备用按钮有明暗图像，就像棋盘一样。那怎么可能呢？

  <html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>The Main Page</title>
  </head>
  <body>
    <table>
            <tr>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
            </tr>
            <tr>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
            </tr>

       </table>
    </body>
   </html>

CSS如下——

  button 
  {
   background-image:url('darkSquare.jpg');  
   width:50px; 
   height:50px; 
   border: 0
  }

  table
  {
   border-collapse: collapse;
  }

td { 填充：0； }

【问题讨论】：

标签： html button spacing

【解决方案1】：

尝试添加这个 css

button:nth-child(even) {
    background-image:url('darkSquare.jpg')
}
button:nth-child(odd) {
    background-image:url('lightSquare.jpg')
}

看到这个jsFiddle

【讨论】：

这让所有按钮都“变亮”了。
请看这个-jsfiddle.net/pjQsq我做错了什么？为什么颜色没有变化？
因为它的元素是兄弟姐妹而不是孩子！不能使用表格，请使用 CSS 对齐
我必须使用这张桌子。有什么办法可以在桌子就位的情况下做到这一点？
你可以用javascript，要不要我给你一个JS例子？

【解决方案2】：

不是完全相同的用例，但它的完成方式与此完全相同：

Alternate table row color using CSS?

鉴于您当前的 HTML，您可以像这样使用 nth-child 进行操作：

td:nth-child(odd) button {
    background-image:url('darkSquare.jpg')
}
td:nth-child(even) button {
    background-image:url('lightSquare.jpg')
}

如果您想要棋盘格外观，可以使用更高级的 CSS 链接。

tr:nth-child(even) td:nth-child(odd) button {
    background-image:url('darkSquare.jpg')
}
tr:nth-child(even) td:nth-child(even) button {
    background-image:url('lightSquare.jpg')
}
tr:nth-child(odd) td:nth-child(odd) button {
    background-image:url('lightSquare.jpg')
}
tr:nth-child(odd) td:nth-child(even) button {
    background-image:url('darkSquare.jpg')
}

请注意，它变得越复杂，它就会变得非常脆弱，但只要您的 HTML 不改变，就可以了。

另外，据我所知，IE 不支持nth-child（最新版本可能支持，我不确定）。

【讨论】：

好的，现在，输出是这样的（暗 = D，亮 = L）- 第 1 行 - D L D L D L D L 第 2 行 - D L D L D L D L 如果我想颠倒第 2 行的顺序怎么办？我正在寻找棋盘式着色。
在原版中，它为每个奇数的td 按钮应用深色背景，为每个偶数按钮应用浅色背景。因为每个tr 具有相同数量的tds，所以会出现垂直条纹。为了在每个tr 上获得相反的顺序，您必须向上移动一个级别。因此，对于每个偶数tr，我们将奇数tds 设置为深色背景，将偶数tds 设置为浅色。对于每个奇数tr，我们将奇数tds 设置为浅色背景，将偶数tds 设置为深色。我在答案中修改了 CSS 规则的顺序，这样会更有意义。
另外，请注意 JavaScript 是另一个有效的选项，在您的用例中可能会更简单。看看我提供的链接。
所以你在这里为4个“tr”编写代码？所以如果我必须做一个棋盘，那么我需要8个这样的“tr”。我说的对吗？
不，我给的第二段代码渲染了你的棋盘图案。您只需要对每个其他 tr 进行相反的渲染。请注意第二个代码块中的前两条规则如何都引用偶数 trs，而后两条规则引用奇数 trs。

【解决方案3】：

我是这样做的 -

   <tr>
                <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
                <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
               <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
               <td><button class="lightSquare"></button></td>
              <td><button class="darkSquare"></button></td>
            </tr>
            <tr>
              <td><button class="darkSquare"></button></td>
               <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
               <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
                <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
                <td><button class="lightSquare"></button></td>
            </tr>

CSS -

        .lightSquare
         {
            background-image:url('lightSquare.jpg');
         }

        .darkSquare
         {
            background-image:url('darkSquare.jpg'); 
         }

是的，我是 CSS 新手。

【讨论】：