第 n 个子选择器不适用于 Wordpress 主题

Question

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

我已经尝试 select 容器 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

您正在寻找 nth-child 个 .kwayy-testimonial-box

.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

您的选择器也有问题。您忘记了 class 选择器 .

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)

这仍然是一个糟糕的选择器格式，但它会按照您的预期工作。

第 n 个子选择器不适用于 Wordpress 主题

nth-child selector not working with Wordpress theme

html

css

wordpress

css-selectors