Question

我的目标是让每个盒子（现场网站上的推荐盒子）都有不同的颜色背景。由于它是一个Wordpress网站，我无法进入并为每个框提供不同的ID，因此我想使用nth-child()选择器。

我尝试使用

选择容器div和该容器中的第一个框

.row multi-columns-row kwayy-items-wrapper:nth-child(1) .contarea {
    background-color:#555;
}

但那没有做任何事情。

Here's a fiddle.

HTML：

    <div class="row multi-columns-row kwayy-items-wrapper">
    <div class=
    "kwayy-testimonial-box col-lg-4 col-sm-6 col-md-4 col-xs-12">
        <div class="kwayy-testimonial-data">
            <blockquote class="kwayy-testimonial-text">
                <div class="contarea">
                    <div class="kwayy-tst-contarea-text">
                        <h2 style="text-align: center;">one</h2>

                        <h4>first box</h4>Lorem ipsum dolor sit amet,
                        consectetur adipiscing elit.
                    </div>
                </div>

                <footer>
                    <span class=
                    "kwayy-testimonial-icon kwicon-fa-quote-left" style=
                    "font-style: italic"></span> <cite class=
                    "kwayy-testimonial-title"></cite>
                </footer>
            </blockquote>
        </div>
    </div>

    <div class=
    "kwayy-testimonial-box col-lg-4 col-sm-6 col-md-4 col-xs-12">
        <div class="kwayy-testimonial-data">
            <blockquote class="kwayy-testimonial-text">
                <div class="contarea">
                    <div class="kwayy-tst-contarea-text">
                        <h2 style="text-align: center;">two</h2>

                        <h4>second box</h4>Lorem ipsum dolor sit amet,
                        consectetur adipiscing elit.
                    </div>
                </div>

                <footer>
                    <span class=
                    "kwayy-testimonial-icon kwicon-fa-quote-left" style=
                    "font-style: italic"></span> <cite class=
                    "kwayy-testimonial-title"></cite>
                </footer>
            </blockquote>
        </div>
    </div>

    <div class=
    "kwayy-testimonial-box col-lg-4 col-sm-6 col-md-4 col-xs-12">
        <div class="kwayy-testimonial-data">
            <blockquote class="kwayy-testimonial-text">
                <div class="contarea">
                    <div class="kwayy-tst-contarea-text">
                        <h2 style="text-align: center;">three</h2>

                        <h4>third box</h4>Lorem ipsum dolor sit amet,
                        consectetur adipiscing elit.
                    </div>
                </div>

                <footer>
                    <span class=
                    "kwayy-testimonial-icon kwicon-fa-quote-left" style=
                    "font-style: italic"></span> <cite class=
                    "kwayy-testimonial-title"></cite>
                </footer>
            </blockquote>
        </div>
    </div>
</div>

CSS：

.row multi-columns-row kwayy-items-wrapper:nth-child(1) .contarea {
background-color:#555;

}

谢谢。

Answer 1

您正在寻找.kwayy-testimonial-box

的第n个孩子

.kwayy-testimonial-box:nth-child(1) .contarea {
    background-color:#555;
}

Demo

或者至少是这样的

.row.multi-columns-row.kwayy-items-wrapper .kwayy-testimonial-box:nth-child(1) .contarea {
    background-color:#555;
}

您必须执行multiple select

您在选择器中也遇到问题。你忘记了班级选择器.

Answer 2

定义选择器时出错。应该是：

.row.multi-columns-row.kwayy-items-wrapper:nth-child(1) .contarea {
    background-color:#555;
}

检查fiddle

Answer 3

班级multi-columns-row和kwayy-items-wrapper适用于同一元素。

您的CSS中还缺少.这些类。

变化：

.row multi-columns-row kwayy-items-wrapper:nth-child(1)

要：

.row.multi-columns-row.kwayy-items-wrapper:nth-child(1)

这仍然是选择器的不良形式，但它会以你想要的方式工作。

nth-child选择器不使用Wordpress主题

3 个答案: