Question

我正在尝试将背景从蓝色更改为红色，但我的代码似乎并未定位在第9个div内。这是我到目前为止所尝试的（顺便说一下，在我的真实版本的脚本中，每个选项卡中都有代码，但我在这里展示了一个简单的基本示例）。

CSS：

.bg-layer {
    height: 100px;
    background-color: blue;
}

.bg-layer .vc_section_wrapper:nth-child(9) {  
    background-color: red;
}

HTML：

<div class="entry-content">
    <section class="vc_section_wrapper has_bg_color"></section>
    <section class="vc_section_wrapper has_bg_color"></section>
    <section class="vc_section_wrapper has_bg_color"></section>
    <section class="vc_section_wrapper has_bg_color"></section>
    <section class="vc_section_wrapper has_bg_color"></section>
    <section class="vc_section_wrapper has_bg_color"></section>
    <section class="vc_section_wrapper has_bg_color"></section>
    <section class="vc_section_wrapper has_bg_color"></section>
    <section class="vc_section_wrapper has_bg_color">
    <div class="bg-layer"></div>
    </section>
</div>

Answer 1

您的标记有9个部分....他们为什么选择:nth-child() ..而不是去:last-child

div.entry-content :last-child {
    background-color: red;
    height:10px;
    border:1px solid red;
}

working demo

Answer 2

你需要在伪选择部分之后指出类名。

.vc_section_wrapper:nth-child(9) .bg-layer{  
background-color: red;
}

<强> DEMO

在第9个同名的<section> </section> </div>中更改命名<div>的背景

2 个答案: