javascript - 响应式棋色元素

Question

我有多行相同的元素，我正在尝试为它们做国际象棋背景布置。

例如:

body {
            max-width: 600px;
        }
        article {
            width: 100px;
            height: 100px;
            display: inline-block;
            margin: 20px;
        }

        article:nth-child(2n) {
            background-color: orange;
        }
        article:nth-child(2n + 1) {
            background-color: blue;
        }

        article:nth-child(2n + 5) {
            background-color: orange;
        }
        article:nth-child(2n + 6) {
            background-color: blue;
        }

        article:nth-child(2n + 10) {
            background-color: orange;
        }
        article:nth-child(2n + 9) {
            background-color: blue;
        }

<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>

有没有什么方法可以只使用 CSS(也许是一些 JS)来进行象棋排列这样清晰和描述性的(可能使用 :nth-child 选择器)一列、二列、三列和四列排列。

Answer 1

我想你想看看奇偶伪类:

article:nth-child(odd)
article:nth-child(even)

https://developer.mozilla.org/en/docs/Web/CSS/:nth-child#Example_selectors

https://stackoverflow.com/a/5080787/5001964

更新#1:即使是奇数元素的工作示例，也不会丢失具有响应能力的国际象棋模式(需要 JS)——全屏打开它以触发窗口调整大小事件

function getNumberOfItemsPerRow(list) {
  var counter = 0;
  var firstRowOffsetTop = list[0].offsetTop;

  list.forEach(function(square) {
    if (square.offsetTop === firstRowOffsetTop) {
      counter += 1;
    }
  });

  return counter;
}

function removePreviousColors(list) {
	list.forEach(function(square) {
  	square.className = '';
  });
}

function chessColorize() {

var squares = document.querySelectorAll('li');
	var itemsPerRow = getNumberOfItemsPerRow(squares);
  var classToAdd;
  var oddLine = true;
  
  removePreviousColors(squares);

  squares.forEach(function(square, index) {

    if (itemsPerRow % 2) {
      classToAdd = index % 2 ? 'color1' : 'color2';
    } else {
      if (oddLine) {
        classToAdd = index % 2 ? 'color1' : 'color2';
      } else {
        classToAdd = index % 2 ? 'color2' : 'color1';
      }
    }

    if ((index + 1) % itemsPerRow === 0) {
      oddLine = !oddLine;
    }

    square.classList.add(classToAdd);
  });
}



chessColorize();

window.addEventListener('resize', chessColorize);

ul {
  list-style: none;
}

li {
  width: 100px;
  height: 100px;
  background-color: blue;
  display: inline-block;
}

li:nth-child(even) {
  background-color: orange;
}

li.color1 {
  background-color: red;
}

li.color2 {
  background-color: green;
}

<main>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</main>