html - 第一个 child 的 CSS 没有得到应用

Question

我需要增加 ng-repeat 中第一个面板的高度

代码

<div class="panel panel-default panel-height" ng-repeat="candidateInfo in aCandidateDetails">
<div class="panel-heading">
    <div class="row">
        <div class="col-xs-1">
            <a style="cursor:pointer">
                {{candidateInfo.name}}
            </a>
        </div>
    </div>
    <div stop-watch time="xyz" name="candidateInfo.name" time-of-interview="candidateInfo.doi" ></div>
</div>

在这里，我已经将 css 应用到 .panel-height 类中，如下所示

.panel-height:first-child {
    height: 500px;
}

这里没有应用 css，我不知道我哪里出错了。任何帮助将不胜感激。

Answer 1

仅当div 满足$first 时才将类添加到'panel-heading'，然后将高度添加到类名'firstChild'。

<div class="panel panel-default panel-height" ng-repeat="candidateInfo in aCandidateDetails">
<div class="panel-heading" ng-class="{'firstChild':$first}"> <!-- Try this line -->
    <div class="row">
        <div class="col-xs-1">
            <a style="cursor:pointer">
                {{candidateInfo.name}}
            </a>
        </div>
    </div>
    <div stop-watch time="xyz" name="candidateInfo.name" time-of-interview="candidateInfo.doi" ></div>
</div>