第一個孩子合格的標題

Question

我想改變一組標籤的格式 - 第一個被對齊到左邊和最後一個在右邊，與中間的那些，縮短版本：https://jsfiddle.net/qqwc51sb/2/。

.krown-tabs .titles li { 
    border: 1px solid #000; 
    width: 20%; 
    display: table; 
    float: left; 
} 
.krown-tabs .titles h5 { 
    text-align: center; 
} 
.krown-tabs .titles h5:first-child { 
    text-align: left; 
} 

的:first-child不工作，我想是因爲<h5>是合格的。但是，標籤文本的其餘格式在此選擇器內，並且在沒有<h5>的情況下不起作用。

謝謝

Answer 1

您應該使用:first-child和:last-child爲<li>，不<h5>。就像這樣：

.krown-tabs li:first-child h5 { 
    background: red; 
} 
.krown-tabs li:last-child h5 { 
    background: blue; 
} 

.krown-tabs .titles li, .memberdeck .dashboardmenu li { 
 
    border: 1px solid #000; 
 
    width: 20%; 
 
    display: table; 
 
    float: left; 
 
} 
 
.krown-tabs .titles h5 { 
 
    text-align: center; 
 
} 
 
.krown-tabs .titles h5:first-child { 
 
    text-align: left; 
 
} 
 
.krown-tabs li:first-child h5 { 
 
    background: red; 
 
} 
 
.krown-tabs li:last-child h5 { 
 
    background: blue; 
 
}

<div class="krown-tabs clearfix"> 
 
    <ul class="titles clearfix autop"> 
 
    <li class=""> 
 
     <h5>All</h5> 
 
    </li> 
 
    <li class="opened"> 
 
    <h5>Arts</h5> 
 
    </li> 
 
    <li> 
 
     <h5>Fashion</h5> 
 
    </li> 
 
    <li> 
 
     <h5>Food & Drink</h5> 
 
    </li> 
 
    <li> 
 
     <h5>Wellbeing</h5> 
 
    </li> 
 
    </ul> 
 
</div>