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

我需要使第一列看起来不同于其他列。下面的样式选择器不会做我想要的。有人能告诉我如何让我的第一列在milestoneRow中与其他列不同吗？CSS样式第一列不同于其他列

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>

来源

2015-10-13 Wannabe

[CSS选择器使用类第一个元素（可能的重复http://stackoverflow.com/questions/ 2717480/css-selector-for-first-element-with-class） – TylerH

不是已接受的答案^，而是由BoltClock提供的最高优先答案之一回答你的问题。 – TylerH

不是重复的指示...... OP实际上是试图选择第一个孩子。这个班级在这里没有相关性。 –

此代码

.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; 
    }

来源

2015-10-13 16:14:42

所以，如果我明白了，我错过了milestoneRow（div）的第一个孩子。谢谢。 – Wannabe

准确地说......你的原始代码只适用于'.milestoneRow' div是第一个孩子的情况。所以它根本没有选择任何父母的子div。 –

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

回答

相关问题