在最後一個孩子上添加一些樣式

我想找到基於班級的最後一個孩子，並且想要應用一些樣式，但是使用了：最後一個孩子選擇它的方式不符合預期。我有一個限制，我不想使用Java腳本，由於元素長度不固定，我不能使用第n個選擇器。在最後一個孩子上添加一些樣式

使用了HTML標記

<ul> 
    <li class="a">First</li> 
    <li class="a">Second</li> 
    <li class="a">Third</li>  
    <li class="b">First</li> 
    <li class="b">Second</li> 
    <li class="b">Third</li>  
    <li class="c">First</li> 
    <li class="c">Second</li> 
    <li class="c">Third</li>   
</ul>

二手的CSS

.a{ 
    color:red; 
} 
.b{ 
    color:blue; 
} 
.c{ 
    color:green; 
} 

.a:last-child{ 
    color:green; 
} 
.b:last-child{ 
    color:red; 
} 
.c:last-child{ 
    color:blue; 
}

如何解決這個問題的任何幫助。

來源

2013-05-15 Soarabh

'一個：最後child'缺少龍頭'.'類選擇。其他人也一樣。這是一個錯字嗎？ – andyb

我認爲OP是要求將風格應用到每個班的最後一個孩子。 –

請檢查我創建的演示 - http://jsfiddle.net/WanzY/1/ - 它只適用於類c – Soarabh

如果你想ul元素的最後一個孩子的目標，比這就夠了

ul li:last-child { 

}

Demo

或者，如果你想要的風格每一個獨特的類的最後一個孩子比你需要比last-child不會在這裏工作，你需要使用nth-of-type代替或類似

Demo

公式

注意：如果您正在動態生成元素，而不是現在的，則無法選擇帶有唯一類的元素的最後一個子元素。 SO 你必須使用nth-child，nth-of-type或公式像我提到

你可以做到這一點，後n迭代和在循環編程創建ul元素，並使用其他方式this selector

來源

2013-05-15 11:15:56

我認爲OP想要第二個選項。 –

想要對每個第三個元素應用一些樣式。不僅在最後一個元素上。請檢查此演示http://jsfiddle.net/WanzY/1/ – Soarabh

不能使用ul li：nth-child（3n + 3）{ color：red; }，因爲元素不固定 – Soarabh

你沒有在最後三個css類中使用點

.a:last-child{ 
    color:green; 
} 
.b:last-child{ 
    color:red; 
} 
.c:last-child{ 
    color:blue; 
}

我想這就是爲什麼你沒有得到輸出

來源

2013-05-15 11:19:21

首先你錯過了在你的類名前面的點，但無論如何這不會解決你的問題。由於您似乎以編程方式生成您的列表，我會建議添加一個類到每個具有某個類的最後一個項目。或者使用Javascript，你不想...

來源

2013-05-15 11:20:26

'+ 1'是的，這對於CSS來說是不可能的，這是最簡單的解決方案。 – andyb

假設它會更容易添加一些額外的類來指定最後一個元素或通過使用JS。

舉例來說，你可以做這樣的事情：

<ul> 
    <li class="a ">First</li> 
    <li class="a ">Second</li> 
    <li class="a last">Third</li>  
    <li class="b">First</li> 
    <li class="b">Second</li> 
    <li class="b last">Third</li>  
    <li class="c">First</li> 
    <li class="c">Second</li> 
    <li class="c last">Third</li>   
</ul>

和CSS：

.a{ 
    color:red; 
} 
.b{ 
    color:blue; 
} 
.c{ 
    color:green; 
} 

.a.last{ 
    color:green; 
} 

.b.last{ 
    color:red; 
} 

.c.last{ 
    color:blue; 
}

http://jsfiddle.net/ud8KZ/1/

來源

2013-05-15 11:41:51

在最後一個孩子上添加一些樣式

回答

相關問題