Question

我知道最后一个孩子是它的父母的最后一个孩子。

<div class"parent">
    <div class="child a"></div>
    <div class="child b"></div>
    <div class="child c"></div>
    <div class="child d"></div>
    <div class="child d"></div>
    <div class="child d"></div>
    <div class="child d"></div>
    <div class="child e"></div>
</div>

下面，

.child:last-child{
    /*This will grab .child.e  as it's the last child of it's parent*/
}

我想使用.child.d选择器选择最后一个:last-child。（.child课程的最后d？什么是CSS选择器？（请不要使用Javascript！）

Answer 1

:last-of-type对我不起作用我正在写postCSS。出于某种原因，这不起作用

.roomOffered{
    &__single{
        border-bottom: 1px solid $color__skipper--fade3;
        padding: 3.5rem 0 3rem;
        margin-bottom: 0;
        &:last-of-type{
            border-bottom: none;
        }
    }
}

最后.roomOffered__single的边框底部未删除!!

Answer 2

您可以使用:nth-child选择器，但不会让您定位.d类...

所以，这是我看到的唯一可行解决方案：

.child {
  padding: 10px;
  background: blue;
  border: solid 1px; 
}

.d {
  background: green;
}

.subparent .d:last-child {
  background: red;
}

<div class"parent">
    <div class="child a"></div>
    <div class="child b"></div>
    <div class="child c"></div>
    <div class="subparent">
      <div class="child d"></div>
      <div class="child d"></div>
      <div class="child d"></div>
      <div class="child d"></div>
    </div>
    <div class="child e"></div>
</div>

CSS-：具有“xyz”类名选择器的last-child？简单的CSS / LESS

2 个答案: