第一個孩子：第一個字母不在列表中

Question

我正在嘗試製作一個列表，其中包含主菜單中某些項目的第一個字母。我有第一個字母psuedo元素在列表中工作，但不希望它顯示在列表中的第一個和最後一個子元素上。

.main-navigation li a:first-letter { 
color: #e88a2a; 
} 

.main-navigation li ul li a:first-letter { 
color: #6a6a6a; 
} 

我使用的是第一部分，該代碼顏色菜單中的項目的第一個字母，然後第二部分停止服用該顏色的子菜單項。

然而，欲以

.main-navigation li a:first-child:first-letter { 
color: #f0f0f0; 
} 

是給每首字母的菜單項和子菜單項的顏色，而不僅僅是第一個（家在我的小提琴）

我希望主頁和聯繫我們不要顯示橙色，否則顯示不同的顏色（默認值），以最簡單的爲準。有人可以幫忙嗎？

http://jsfiddle.net/wM9eA/

Answer 1

的這裏的問題是，:first-child適用於它的直接應用的元素，而:first-letter適用於元素的內容。說a:first-child將挑選li內的第一個a，並且每個li中只有一個a。我們需要將其選擇應用於li。

Working Fiddle

.main-navigation li:first-child a:first-letter { 
    color: #e88a2a; 
} 

.main-navigation li ul li:first-child a:first-letter { 
    color: #6a6a6a; 
} 

Answer 2

您需要li元素與first-child目標，同樣也適用於last-child。

.main-navigation li:first-child a:first-letter, 
.main-navigation li:last-child a:first-letter{ 
    color: #f0f0f0; 
} 

Working Fiddle

Answer 3

你想第一個和最後的li元素。

.main-navigation li:first-child a:first-letter, 
.main-navigation li:last-child a:first-letter { 
    color: inherit; 
}