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

Question

我需要让第一列看起来与其他列不同。以下样式选择器不能执行我想要的操作。有人可以告诉我如何在里程碑里面得到我的第一列与其他列不同吗？

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 时才适用。

你需要使用后代选择器选择milestoneRow的实际第一个孩子：

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