html - nth-child 的替代样式

Question

我正在为自己的风格而苦苦挣扎。

我想交替使用蓝色和绿色气泡(blue > green > blue > green ...)。只有 .bubble 元素应该有交替的 background-color。 .input 应保持原样。

这是我的简化代码。

.container > div {
  display: inline-block;
  margin: 5px;
}

.container .bubble:nth-child(even) {
    background-color: #4a94ed;
    border-color: #4a64ed;
}


.container .bubble:nth-child(odd) {
    background-color: #4df200;
    border-color: #00f23d;
}

<div class="container">
    <div class="input">input</div>
    <div class="bubble">bubble 1</div>
    <div class="input">input</div>
    <div class="bubble">bubble 2</div>
    <div class="input">input</div>
    <div class="bubble">bubble 3</div>
    <div class="input">input</div>
    <div class="bubble">bubble 4</div>
    <div class="input">input</div>
    <div class="bubble">bubble 5</div>
</div>

我的问题似乎来自 .input 元素，这些元素算作 nth-child 因为只有 even 部分触发.

不幸的是，我无法更改 HTML 结构和类。

你有什么想法吗？

Answer 1

尝试将您的奇数和偶数样式更改为:

.container .bubble:nth-child(2n) {
    background-color: #4a94ed;
    border-color: #4a64ed;
}

.container .bubble:nth-child(4n) {
    background-color: #4df200;
    border-color: #00f23d;
}

工作示例:http://codepen.io/JasonGraham/pen/VjYYXd