Html 在CSS中发布样式，以便每个奇数div更改颜色和位置

我正在设计一个网页，内容出现在语音气泡状的div中。我想使用CSS来修改div，使每个其他的语音气泡颜色稍微深一点，并且语音气泡的尖头部分从右向左变化

我已经能够将每个奇数div的主要内容的背景颜色和文本对齐更改为较深的灰色，但是，无论我尝试了什么解决方案，语音气泡的“点”的颜色及其从右到左的位置都不会改变

成功的一点是：

/* MAIN BODY OF SPEECH BUBBLE */

.infoBox .aboutBox {

    border-top: 5px solid #670d94;
    background: #eee;
    padding: 1em;
    margin: 2em;
    margin-bottom: 4em; /* */

}

/* CHANGE LAYOUT/COLOUR OF EVERY OTHER SPEECH BUBBLE */

.infoBox:nth-child(odd) .aboutBox {

    background: #c9c9c9;
    text-align: right;

}

还有一点没有：

/* CREATE SPEECH BUBBLE POINT */

.bubble {

    position: relative;
    background: #eee;

}

.bubble::after  {

    content:"";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-right: 40px solid transparent; /* */
    border-left: 40px solid transparent; /* */
    border-top: 50px solid #eee; /* */
    right: 50px; /* */

}

/* CHANGE POSITION/COLOUR OF EVERY OTHER SPEECH BUBBLE POINT */

.bubble:nth-child(odd) ::after  {

    content:"";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-right: 40px solid transparent; /* */
    border-left: 40px solid transparent; /* */
    border-top: 50px solid #c9c9c9; /* */
    left: 50px; /* */

}

HTML是：

<div class="infoBox">

            <div class="aboutBox bubble">

                <div id="profilePic"> <img align="right" src="img\profileIcon.png"/> </div>

                <b>Name Surname</b>
                <br>
                Job role
                <br>
                <br>
                Short bio: blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                <hr>

            </div>

        </div>

<div class="infoBox">

            <div class="aboutBox bubble">

                <b>Name Surname</b>
                <br>
                Job role
                <br>
                <br>
                Short bio: blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                <hr>

            </div>

        </div>

姓名


工作角色




简短的简历：废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话

姓名


工作角色




简短的简历：废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话

我已经附上了一些图片，以澄清我的解决方案的目标和我目前的代码的结果。非常感谢您的帮助

---

您已经很接近了，但是您需要针对奇数编号的信息框进行设置，因此：

.infoBox:nth-child(odd) .bubble::after  {
    // Set style
}

问题是，当您直接以气泡为“奇数”目标时，容器中只有1个气泡，因此它始终与选择器匹配。使用“奇数”将外部容器作为目标，然后选择其中的气泡

下面是一个工作片段。

/*语音气泡的主体*/
.infoBox.aboutBox{
边框顶部：5px实心#670d94；
背景：#eee；
填充：1em；
边缘：2米；
页边距底部：4em；/**/
}
/*更改其他每个语音气泡的布局/颜色*/
.infoBox:n个子项（奇数）.aboutBox{
背景：#c9c9c9；
文本对齐：右对齐；
}
/*创建语音泡点*/
.泡泡{
位置：相对位置；
背景：#eee；
}
泡泡之后{
内容：“；
显示：块；
位置：绝对位置；
宽度：0；
身高：0；
右边框：40px实心透明；/**/
左边框：40px实心透明；/**/
边框顶部：50px实心#eee；/**/
右：50px；/**/
}
/*更改其他每个语音泡点的位置/颜色*/
.infoBox:n个子项（奇数）.bubble:：after{
内容：“；
显示：块；
位置：绝对位置；
宽度：0；
身高：0；
右边框：40px实心透明；/**/
左边框：40px实心透明；/**/
边框顶部：50px实心#c9c9c9；/**/
左：50px；/**/
}

姓名


工作角色




简短的简历：废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话

姓名


工作角色




简短的简历：废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话

请将您的HTML添加到问题中是的，请将您的HTML代码附加到上面添加的问题HTML中。