在CSS中发布样式，因此每个奇数div都会更改颜色和位置

Question

我正在设计一个网页，其中内容会出现在气泡形状的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>

我附上了一些图片，以阐明我想要的解决方案和当前代码的结果。任何帮助将不胜感激！

Answer 1

您已经接近了，但是您需要定位到奇数编号的信息框，然后进行设置，所以：

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

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

这是一个有效的代码段。

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

.infoBox:nth-child(odd) .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 #c9c9c9; /* */
    left: 50px; /* */

}

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