使用 CSS 循环的样式

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

正如 volodymyr 所说css使用第 n 个子属性。

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

你的css引用了"class"演示选择器，但你的HTML使用"id"属性id='demo'。更改其中一个以匹配另一个。