为什么选择 <ul> 中的第一个 child 不起作用，而文本位于 <a> 中

Question

我想知道为什么我不能 select 我的 ul 的第一个 child。但是当我将文本“我的标题”而不是 link 移动到列表时它起作用了。相反，它 select 所有这些。

<div class="nav-bar-inner-items">
  <ul>
    <li> <a href="#"> myfirstlink</a> </li>
   <li> <a href="#"> mysecondlink</a> </li>
</ul>
</div>


.nav-bar-inner-items{
    ul{
        display: flex;
        align-items: center;
        text-transform: uppercase;
        margin:0;
        padding:0;
      
        :first-child{
               background:red;
           }
      li{
        margin: 0 13px;
      }

  }}

https://codepen.io/aina-raharison/pen/BamzJPE

谢谢

Answer 1

选择器应该在

中并在之前添加一个 & :（如果使用 scss，就像我在 codepen 中看到的那样）。

.nav-bar-inner-items{
    ul{
        display: flex;
        align-items: center;
        text-transform: uppercase;
        margin:0;
        padding:0;
      
        
      li{
        margin: 0 13px;
        
        &:first-child{
             background:red;
         }
      }

  }}

Answer 2

你的 scss 是错误的 - 请看下面：

.nav-bar-inner-items {
  ul {
    display: flex;
    align-items: center;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    li {
      margin: 0 13px;
      &:first-child { // <--- first child is the <li> 
        background: red;
      }
    }
  }
}