nth-child 选择器不适用于 Wordpress 主题答案

【问题标题】：nth-child selector not working with Wordpress thementh-child 选择器不适用于 Wordpress 主题
【发布时间】：2015-05-14 23:08:26
【问题描述】：

我的目标是让每个框（即现场网站上的推荐框）都有不同的颜色背景。由于它是一个 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;

}

谢谢。

【问题讨论】：

如果您删除nth-child，您会看到您的选择器仍然没有匹配任何内容。问题不在于nth-child，而在于css 选择器的其余部分。

标签： html css wordpress css-selectors

【解决方案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

您的选择器也有问题。你忘了类选择器.

【讨论】：

完美，谢谢！我选择了这些元素在检查器中列出的类，但看起来这绝不是一种万无一失的方法。

【解决方案2】：

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

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

查看fiddle

【讨论】：

【解决方案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)

这仍然是一个糟糕的选择器结构，但它会按照你想要的方式工作。

【讨论】：