Question

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

我想要替换蓝色和绿色气泡（蓝色＆gt;绿色＆gt;蓝色＆gt;绿色 ...）。只有.bubble元素应具有替换的背景颜色。 .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

Answer 2

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

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

在我的小提琴上试试这个：https://jsfiddle.net/0ua51sum/7/

Answer 3

这将工作....

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

Answer 4

您可以将第n个子选择器编写为:nth-child(4n+2)或:nth-child(4n)。

＆＃13;

.container > div {
  display: inline-block;
  margin: 5px;
}

.container .bubble:nth-child(2n) {
    background-color: #4a94ed;
    border-color: #4a64ed;
}


.container .bubble:nth-child(4n) {
    background-color: #4df200;
    border-color: #00f23d;
}

＆＃13;

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

＆＃13;

与nth-child交替的风格

4 个答案: