first-child：第一个字母不在列表中工作

Question

我正在尝试为主菜单中的某些项目创建一个具有不同首字母的列表。我在列表中使用了第一个字母的伪元素，但不希望它显示在列表中的第一个和最后一个子元素上。

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

给菜单项和子菜单项中的每个第一个字母着色，而不仅仅是第一个字母（Home in my fiddle）

我希望Home和Contact Us不要显示橙色，否则显示不同的颜色（默认颜色），以最简单的颜色为准。有人可以帮忙吗？

http://jsfiddle.net/wM9eA/

Answer 1

您需要使用first-child定位li元素，last-child也是如此。

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

Working Fiddle

Answer 2

你想要第一个和最后一个li元素。

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

Answer 3

此处的问题是:first-child适用于直接应用的元素，而:first-letter适用于该元素的内容。说a:first-child将选择a中的第一个li，并且每个a中只有一个li。我们需要将选择应用于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;
}