Question

我应该制作8个框并为每个框设置样式，使框具有for循环。每个奇怪的盒子看上去都应该与其他盒子不同。我试图做一个id，但是当我在CSS中使用id时，它什么也不会做。有人可以帮忙吗？

这是我的代码：

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-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>

Answer 2

如volodymyr所说，请使用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 3

您的CSS引用了“类”演示选择器，但您的HTML使用了“ id”属性id ='demo'。更改任何一个以匹配另一个。

CSS循环样式

3 个答案: