Стиль для цикла с CSS

Question

Я должен сделать 8 коробок и оформить их каждый, сделать коробки с циклом for.Каждая нечетная коробка должна выглядеть иначе, чем другие.Я пытался создать идентификатор, но когда я использую идентификатор в CSS, он ничего не сделает.Может кто-нибудь помочь?

Вот код, который у меня есть:

var text = "";
var i;
for (i = 1; i < 10; i++) {
  text += "Box number " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;

.demo {
  border: black;
}

<p id="demo"></p>

Answer 1

Как говорит Владимир, используйте свойство css nth-child.

В JavaScript вы можете сделать это следующим образом:

for(let i = 0; i < document.querySelectorAll('.class').length; i += 2){
  document.querySelectorAll('.class')[i].style.color = 'red';
}

   <div class="class">1</div>
    <div class="class">2</div>
    <div class="class">3</div>
    <div class="class">4</div>
    <div class="class">5</div>
    <div class="class">6</div>
    <div class="class">7</div>
    <div class="class">8</div>
    <div class="class">9</div>
    <div class="class">10</div>

Используется цикл for, который выполняет итерацию по каждому нечетному элементу, а затем применяет стили через javascript.Обычно предпочтительнее использовать чистую реализацию CSS.

Answer 2

Ваш css ссылается на селектор демо "class", но ваш HTML использует свойство "id" id = 'demo'.Замените одно на другое.

Answer 3

Вы можете использовать свойство css nth-clild

.class:nth-child(odd) {background: red}

    <div class="class">1</div>
    <div class="class">2</div>
    <div class="class">3</div>
    <div class="class">4</div>
    <div class="class">5</div>
    <div class="class">6</div>
    <div class="class">7</div>
    <div class="class">8</div>
    <div class="class">9</div>
    <div class="class">10</div>