Question

我正在制作一个带幻灯片的演示网站。每张幻灯片都是div。我已经制作了类似'layout-50'，'layout-70'的课程，作为幻灯片的模板。它看起来像这样：

<!----------- SLIDE 1 ----------->
<!------------------------------->
<div data-scroll-index="0" class="slide">
    <div class="layout-100"></div>
</div>

<!----------- SLIDE 2 ----------->
<!------------------------------->
<div data-scroll-index="1" class="slide">
    <div class="layout-70">

    </div>
</div>



<!----------- SLIDE 3 ----------->
<!------------------------------->
<div data-scroll-index="2" class="slide">
        <div class="layout-100">
        </div>
</div>

在CSS中，我用子选择器调用这些类。问题是，我不能使用nth：child（2）来选择第二个'layout-100'。无论如何我能做到吗？

Answer 1

如果它不是动态的，你可以检查父
的索引

.slide:nth-child(3) .layout-100 {
}

您的代码中的问题是幻灯片类div中只有一个子元素

但是使用nth-child会出现低于ie9浏览器的问题

孩子在整个文件中选择

1 个答案: