Question

我有一个嵌套的显示器，我试图设置除第一个之外的所有嵌套集合

<div class="container">

    <div class="main-collection">
        <div class="collection">

            <!-- lots of code -->
            <div class="collection"></div>

            <!-- lots of code -->
            <div class="collection"></div>

            <!-- lots of code -->
            <div class="collection">

                <!-- lots of code -->
                <div class="collection"></div>

                <!-- lots of code -->
                <div class="collection"></div>

            </div>
        </div>
    </div>

</div>

我希望除main-collection

之外的所有人之外的所有人

我正在使用less。

Answer 1

.main-collection > .collection .collection {
    /* your styles here */
}

Working demo

选择作为.collection元素后代的所有.collection元素，它是>

的DIRECT后代（.main-collection）

Answer 2

在较少的CSS中尝试此

.main-collection{
   >.collection{
    // here style
     >.collection{
        // here style
           >.collection{
              // here style
           }
       }
  }
}

Answer 3

最明显的方法是使用nth-child，尽管对旧版浏览器的支持有限。如果您可以控制标记，您是否考虑使用类来标识要以不同方式设置样式的元素？

Answer 4

首先对所有元素执行css，然后在下面选择第一个元素并为其执行样式。下面的CSS覆盖了上面的其他内容。您可以使用:nth-child(1)或我猜:first-child或甚至可能:first-of-type和:nth-of-type(1)

.main-collection .collection {
    css for all of them
}

.main-collection .collection:nth-child(1) {
    this will only target the first one
}

CSS选择器 - 不在直接父级下

4 个答案: