css - 如何解决此 <li> 中的不同 <a>

Question

我对 :nth-of-type() 选择器有一个小问题。也许你能帮忙。 我无法只选择第一个 a。 这个怎么做？ 谢谢

 <nav>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Produkte</a></li>
  <li><a href="#">Beratung</a></li>
  <li><a href="#">Kontakt</a></li>
  <li><a href="#">Anfahrt</a></li>
</ul>

和sass

li > a:nth-of-type(1){

&:before{
content:"1";
display:inline-block;
width:20px;
background:black;
border-radius:50%;
margin-right:5px;
}
}

Answer 1

你可以在li:first-child a里面先选择li然后选择a，你也可以用li做同样的事情:nth-of-type(1) a 或 li:nth-child(1) a

li:first-child a {
  background: blue;
}

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Produkte</a></li>
    <li><a href="#">Beratung</a></li>
    <li><a href="#">Kontakt</a></li>
    <li><a href="#">Anfahrt</a></li>
  </ul>
</nav>