html - CSS 样式第一列与其他列不同

Question

我需要让第一列看起来与其他列不同。以下样式选择器不符合我的要求。有人可以告诉我如何让 milestoneRow 中的第一列与其他列不同吗？

CSS

.milestoneRow {
    line-height: 55px;
}

.milestoneRow:first-child {
    line-height: 16px;
    margin-left: 10px;
    margin-right: -10px;
}

.milestoneRow:not(:first-child) {
    color: white;
    font-weight: bold;
}

HTML

<div class="row milestoneRow">
    <div class="col-md-1">
        1st Column <br />
        3 Lines <br />
        Closer Together
    </div>
    <div class="col-md-2">
        2nd Column
    </div>
    <div class="col-md-1">
        3rd Column
    </div>
    <div class="col-md-3">
        4th Column
    </div>
    <div class="col-md-3">
        5th Column
    </div>
    <div class="col-md-2">
        6th Column
    </div>
</div>

Answer 1

这段代码

.milestoneRow:first-child {
    line-height: 16px;
    margin-left: 10px;
    margin-right: -10px;
}

仅当 .milestoneRow 是第一个 child 时才适用。

您需要使用后代选择器来选择 milestoneRow 的第一个子代:

 .milestoneRow div:first-child {
        line-height: 16px;
        margin-left: 10px;
        margin-right: -10px;
    }