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樣式第一列不同於其他列

回答

相關問題