如何在不使用 CSS 中的类或 ID 的情况下创建棋盘？-css教程-PHP中文网

如何在不使用 CSS 中的类或 ID 的情况下创建棋盘？

Barbara Streisand

发布： 2024-10-31 11:54:30

原创

222 人浏览过

How can you create a chessboard without using classes or IDs in CSS?

纯 CSS 棋盘：探索 Div 并避免类和 Id

尝试仅使用 CSS 创建棋盘并避免使用类或 ID 可能看起来是一项艰巨的任务。然而，这项任务激起了许多人的好奇心，包括接受挑战的程序员。

提供的 HTML 布局由许多嵌套的

组成。元素，为棋盘图案的造型提出了独特的挑战。利用 nth-child() 选择器的传统方法已被证明是不成功的。

重新思考该方法

我们可以利用一种不同的方法，而不是直接针对特定的单个元素，该方法涉及改变特定组内交替元素的外观。这就是奇数和偶数伪类真正发挥作用的地方。

例如，让我们考虑一个表：

<code class="html"><table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table></code>

登录后复制

使用 CSS，我们可以在其中定位交替的行和列此表：

<code class="css">table tr:nth-child(odd) td:nth-child(even) {
  background: #000;
}

table tr:nth-child(even) td:nth-child(odd) {
  background: #000;
}</code>

登录后复制

此 CSS 规则根据特定单元格在行和列中的位置设置其背景颜色。通过这样做，创建了一个实际上类似于棋盘的棋盘图案。

优雅而高效

这种方法提供了一种干净高效的方法来使用纯CSS，忠于避免类和 ID 的约束。它展示了 CSS 选择器的多功能性以及它们根据元素在给定结构中的位置来定位元素的能力。

因此，虽然最初看起来像是一种非常规方法，但它利用了奇数和偶数伪值的强大功能-类提供了解锁解决方案的钥匙。

以上是如何在不使用 CSS 中的类或 ID 的情况下创建棋盘？的详细内容。更多信息请关注PHP中文网其他相关文章！