Question

我有这两个要素：

<div class="navbar-header">
    <a href="#" class="navbar-brand collapse-award"></a>
    <a href="#" class="navbar-brand collapse-award"></a>
</div>

我试图申请：第一个孩子：这些项目的最后一个孩子，但是它不起作用是第一个，最后一个孩子只申请列表项目吗？

.navbar-header .collapse-award:first-child {
        max-height: 50px;
}

.navbar-header .collapse-award:last-child {
        max-height: 80px;
        margin-top: -10px;
}

Answer 1

请参阅示例中的工作：http://codepen.io/anon/pen/QwVErQ

<div>
   <a href="#" class="collapse-award">item 1</a>
   <a href="#" class="collapse-award">item 2</a>
</div>

.collapse-award:last-child {
    max-height: 80px;
    margin-top: -10px;
    color:#FF0000;
}
.collapse-award:first-child {
    max-height: 50px;
    color:#00FF00;
}

Answer 2

也许您正在寻找：

:first-of-type

和

:last-of-type

如果你想使用锚元素而不是子元素，并给锚元素一个

 display: inline-block

让风格有效。

CSS：链接类上的第一个子节点不起作用

2 个答案: