如何为菜单的特定部分（字母）着色？

Question

首先，祝大家新年快乐！ ：）

好的，让我们来看看吧。我的菜单中有5个项目，我想将该单词的“+”部分为红色，选择第2，第3和第4项菜单。

这就是现在的菜单。

这就是菜单完成时的样子。

我可能给了一张糟糕的照片，但我认为你可以在菜单的第2，第3和第4项上看到红色的“+”。

这是我到目前为止所尝试过的，但我似乎无法弄清楚n-child方法。

#menu li:nth-child(2):first-letter a{color:red;}

也尝试了这个，但它为所有5个元素中的每个首字母着色：S

#menu .nav > li > a:first-letter{color:red;}

任何帮助将不胜感激！

谢谢大家！

我成功找到了解决方案。不确定它是否是最好的，但我发布在下面，以便将来任何1都可以使用它，如果没有找到其他解决方案

#menu .nav > li:nth-child(2) > a:first-letter
{
color:red;
}
#menu .nav > li:nth-child(3) > a:first-letter
{
color:red;
}
#menu .nav > li:nth-child(4) > a:first-letter
{
color:red;
}

Answer 1

使用:not()选择器可以选择one以外的所有内容：

＆＃13;

＆＃13;

#menu{
background: rgb(83,83,83);
width: 100vw;
height: 40px;  
}

ul{
text-align: center;
line-height: 40px;  
vertical-align: central;  
}

ul li{
display: inline-block;
color: white;  
list-style: none;  
margin-left: 25px;  
}

a{
color: white;
display: block;  
}

#menu ul li:not(:first-child):not(:last-child) a::first-letter{
color: red;
}

＆＃13;

<div id="menu">
  
  <ul>
    <li><a href="#">+option</a></li>
    <li><a href="#">+option</a></li>
    <li><a href="#">+option</a></li>
    <li><a href="#">+option</a></li>
    <li><a href="#">+option</a></li>
  </ul>
</div>  

＆＃13;

＆＃13;

＆＃13;

Answer 2

我知道这个问题已经有了一个公认的答案，但我认为这样做有一种语义上更好的方法。而不是在链接的标记中包含:before符号，为什么不将其添加为伪<nav> <ul> <li><a href="#">Domov</a></li> <li class="with-symbol"><a href="#">Naravni kamen</a></li> <li class="with-symbol"><a href="#">Dekorativni kamen</a></li> <li class="with-symbol"><a href="#">Keramika</a></li> <li><a href="#">Kontakt</a></li> </ul> </nav> 元素？更容易设计风格，而不依赖于您的标记。

.with-symbol:before {
  content: '+';
  color: red;
}

各自的CSS：

position: absolute;

然后将其定位为{{1}}或左边距为负。

Answer 3

从文档（https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Afirst-letter）：第一行仅在块容器框中有意义，因此:: first-letter伪元素仅对显示值为block的元素有效，内联块，表格单元格，列表项目或表格标题。在所有其他情况下，:: first-letter无效。因此，您需要将display：block添加到锚标签中。 我也会将选择器更改为：

ul li a:first-letter {
    color:red;
}

因为您需要选择锚标记的第一个字母，而不是列表项。 作为旁注，使用上面建议的跨度或伪元素来插入加号字符并使用类来确定是否应该显示或不使用它可能是更好的解决方案。