将 css 添加到第一个 child 和下一个 child 样式？

Question

我喜欢这个标记

<div class="sprite player" style="top: 28%; left: 26%;"></div>
<div class="sprite player" style="top: 10%; left: 37%;"></div>
<div class="sprite player" style="left: 36%; top: 28%;"></div>

每个元素都有内联样式，但我想把它放在 CSS 里面，我不想像新的那样 class 然后添加样式，这也许可以通过伪来完成class 首先 child 然后第二个等等

当我有新的时候css我需要这样的东西

.player:first-child{
top: 28%; left: 26%;
}
.player:first-child + .player{
top: 10%; left: 37%;
}

等等，有没有可能做成这样？

Answer 1

试试这个可能对你有帮助

.player:nth-child(1){
top: 28%; left: 26%;
}
.player:nth-child(2){
top: 10%; left: 37%;
}
.player:nth-child(3){
left: 36%; top: 28%;
}

将 css 添加到第一个 child 和下一个 child 样式？

Adding css to first child and next child style?

css

css-selectors

pseudo-class