选择具有相同 CSS 类的特定 div

Question

我有 6 个具有相同 css 类的 div，并且想在每个 div 上单独添加 css，而不更改 css 类（因为如果我更改类，会有很多代码会中断）并且也不能添加任何其他在当前的之上。如何单独选择每个 div 为每个 div 添加不同的 css？

<div class="c-transparencia-graficos__part"> ... </div>
<div class="c-transparencia-graficos__part"> ... </div>
<div class="c-transparencia-graficos__part"> ... </div>
<div class="c-transparencia-graficos__part"> ... </div>
<div class="c-transparencia-graficos__part"> ... </div>
<div class="c-transparencia-graficos__part"> ... </div>

例如，我想在第一个 div 上添加一个绝对位置，前 0 为前 0，但不在其他位置上，同样，我不能添加任何 css 类或更改当前类。

另外（也许这有帮助）在 div 内部有一些代码会改变其他 div，所以也许我可以使用儿童选择一个类？ .c-transparencia-graficos__part .sample1 的问题在于我正在改变 te .sample1 类而不是我感兴趣的 .c-tra ...

有什么办法吗？

Answer 1

给你...

使用:nth-child() CSS 选择器。阅读更多关于它的信息here。

请参阅下面的 sn-p。

.c-transparencia-graficos__part:nth-child(1) {
  background-color: blue;
}

.c-transparencia-graficos__part:nth-child(2) {
  background-color: red;
}

.c-transparencia-graficos__part:nth-child(3) {
  background-color: purple;
}

.c-transparencia-graficos__part:nth-child(4) {
  background-color: yellow;
}

.c-transparencia-graficos__part:nth-child(5) {
  background-color: green;
}

.c-transparencia-graficos__part:nth-child(6) {
  background-color: brown;
}

<div class="c-transparencia-graficos__part"> ... </div>
<div class="c-transparencia-graficos__part"> ... </div>
<div class="c-transparencia-graficos__part"> ... </div>
<div class="c-transparencia-graficos__part"> ... </div>
<div class="c-transparencia-graficos__part"> ... </div>
<div class="c-transparencia-graficos__part"> ... </div>