主页 / 问题 / 1136459
Accepted
Александр
Asked:2020-06-05 00:38:57 +0000 UTC2020-06-05 00:38:57 +0000 UTC

如何通过 nth-child 以棋盘模式选择块？

  • 772

我需要以棋盘格模式选择第一行的每隔一个块，然后选择第二行的 1 个和 3 个块。告诉我怎么做？

在此处输入图像描述

css

3 个回答

  1. Best Answer

    不幸的是，不可能想出一个更漂亮的解决方案，因为该函数只接受简单的表达式，因此无法在此处输入:nth-child()序列。-1 - 2 (-1)^(2n) + (-1)^(1 + n) + 4n

    section {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
}
div {
  border: 1px solid;
  background-color: blue;
}

div:nth-child(5n),
div:nth-child(5n-3),
div:nth-child(4){
    background: black;
}
    <section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

    • 3

  2. css

    .col {
  width: 100px;
  height: 40px;
  display: inline-block;
  border: solid 2px black
}
.row:nth-child(odd) .col:nth-child(odd) {
  background: black;
}

.row:nth-child(even) .col:nth-child(even) {
  background: black;
}

    HTML

    <div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
  </div>
  <div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
  </div>
    • 1

  3. 我有一个想法如何在包装器的背景下实现这一点 - 您可以使用锥形渐变制作棋盘图案。

    我们生活在一个了不起的时代！:-)

    section {
  --cell-size: 100px;
  display: inline-grid;
  grid-template-columns: repeat(4, var(--cell-size));
  grid-auto-rows: var(--cell-size);
  background-image: repeating-conic-gradient(black 0% 25%, blue 0% 50%);
  background-size: calc(var(--cell-size) * 2) calc(var(--cell-size) * 2);
  background-position: 0 0;
}
    <section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

    • 1

相关问题