你能用純 CSS 創建一個沒有類別或 ID 的棋盤嗎？

純 CSS 棋盤創建：Div，無類或 ID

在純 CSS 藝術領域，出現了一個常見的挑戰：如何在不借助類或 ID。這個領域的一個奇怪的難題是僅使用 div 建立棋盤，沒有類別或 ID。

這項特殊任務讓有抱負的 CSS 嚮導困惑了好幾天，吸引他們探索 nth-child() 和它的變化。然而，似乎沒有任何解決方案能夠實現。

那麼，有可能實現這項難以捉摸的設計壯舉嗎？

有趣的是，雖然棋盤可以使用沒有類別或 ID 的 div 來渲染，但它可能更適合用表格來表達。這為螢幕閱讀器提供了更多的可訪問性，使他們能夠清楚地傳達棋盤上圖形的位置。

考慮以下 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 有效地在其中創建了一個棋盤圖案一個表結構。透過交替奇數行和偶數行和列的背景顏色，就出現了熟悉的方格圖案。

這是 JSFiddle 上的示範：

<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 創建一個沒有類別或 ID 的棋盤嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！