Fatal编程技术网
  • html/
  • Html 如何使用CSS更改备用按钮的颜色？

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

html button

Html 如何使用CSS更改备用按钮的颜色？,html,button,spacing,Html,Button,Spacing,我有以下代码。我有两个按钮的背景图像-lightSquare.jpg和darkSquare.jpg。目前，所有按钮都有名为darkSquare.jpg的背景图像。我想做的是让交替按钮有明暗图像，就像棋盘一样。这怎么可能呢 <html> <head> <link rel="stylesheet" type="text/css" href="styles.css" /> <meta http-equiv="Content-Type"

我有以下代码。我有两个按钮的背景图像-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>
运输署 { 填充：0； }尝试添加此css

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

尝试添加此css

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

并非完全相同的用例，但其实现方式与此完全相同：

鉴于您当前的HTML，您可以使用第n个子项执行此操作，如下所示：

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不支持N个孩子，我不确定最新版本是否支持N个孩子。

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

鉴于您当前的HTML，您可以使用第n个子项执行此操作，如下所示：

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不支持第N个孩子，我不确定最新版本是否支持

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

我是这样做的-

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

这使得所有的按钮都变亮了。请看这个-我做错了什么？为什么颜色不变？因为元素是兄弟而不是子元素！您不能使用表格，请使用CSS对齐itI。我必须使用此表格。有没有什么方法可以让我在表格中完成它？你可以使用javascript，你想让我给你一个JS示例吗？这让所有按钮都变轻了。请看这个-我做错了什么？为什么颜色不变？因为元素是兄弟而不是子元素！您不能使用表格，请使用CSS对齐itI。我必须使用此表格。有没有什么方法可以在表格就位的情况下完成呢？你可以使用javascript，你想让我给你一个JS示例吗？好的，现在，输出是这样的：暗=D，亮=L-行1-D L D L D L D L D L D L行2-D L D L D L D L L，如果我想颠倒第2行的顺序呢？我正在寻找一种棋盘式的颜色。在原作中，它将深色背景应用于每个奇数td的按钮，将浅色背景应用于每个偶数td的按钮。因为每个tr有相同数量的tds，所以可以得到垂直条纹。为了在每个tr上获得相反的顺序，您必须向上移动一个级别。因此，对于每个偶数tr，我们将奇数tds设置为暗背景，偶数tds设置为亮背景。对于每个奇数tr，我们将奇数tds设置为浅背景，偶数tds设置为暗背景。在我的回答中，我修改了CSS规则的顺序，使其更有意义。另外，请注意JavaScript是另一个有效选项，在您的用例中可能会更简单。看看我给你的链接，你在这里写的是4个trs的代码？因此，如果我必须做一个棋盘，那么我需要8个这样的tr。我说的对吗？不，我给你的第二段代码呈现了你的棋盘图案。你只需要对每一个tr进行相反的渲染。注意，第二个代码块中的前两个规则都是指偶数tr，而后两个规则是指奇数tr。好的，现在，输出是这样的：暗=D，光=L-行1-D L D L D L D L D L D L L D L行2-D L D L D L L L D L L L D L，如果我想颠倒第2行中的顺序呢？我正在寻找一种棋盘式的颜色。在原作中，它将深色背景应用于每个奇数td的按钮，将浅色背景应用于每个偶数td的按钮。因为每个tr有相同数量的tds，所以可以得到垂直条纹。为了在每个tr上获得相反的顺序，您必须向上移动一个级别。因此，对于每个偶数tr，我们将奇数tds设置为暗背景，偶数tds设置为亮背景。对于每个奇数tr，我们将奇数tds设置为浅背景，偶数tds设置为暗背景。在我的回答中，我修改了CSS规则的顺序，使其更有意义。另外，请注意JavaScript是另一个有效选项，在您的用例中可能会更简单。看看我给你的链接，你在这里写的是4个trs的代码？因此，如果我必须做一个棋盘，那么我需要8个这样的tr。我说的对吗？不，我给你的第二段代码呈现了你的棋盘图案。您只需要每隔一个tr使用相反的渲染。请注意，第二个代码块中的前两个规则都指偶数tr，而后两个规则指奇数tr。