Question

我正在尝试通过“第n个子对象”选择器定位“ i”元素，但我不知道如何。您能向我解释一下吗？在提供的代码中，我尝试使用SASS

 <ul class="nav-social">
          <li>
            <a href="#"><i class="fab fa-facebook-f"></i></a>
          </li>
          <li>
            <a href="#"><i class="fab fa-twitter"></i></a>
          </li>
          <li>
            <a href="#"><i class="fab fa-youtube"></i></a>
          </li>
          <li>
            <a href="#"><i class="fab fa-instagram"></i></a>
          </li>
        </ul>

我如何尝试：

.nav-social {
    li a {
      margin-right: 0.5rem;


      i {
        font-size: 1.5rem;
        // border: 1px solid red;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0);
        color: whitesmoke;
        width: 35px;
        height: 35px;
        text-align: center;
        line-height: 35px;

        &:nth-child(1) {
          color: green;
        }
      }


    }
  }

Answer 1

您需要选择nth-child（父级）中的ul。因此，您需要定位li元素：

.nav-social
{
    li
    {
        a
        {
            margin-right: 0.5rem;
            i
            {
                font-size: 1.5rem;
                // border: 1px solid red;
                border-radius: 50%;
                background: rgba(0, 0, 0, 0);
                color: whitesmoke;
                width: 35px;
                height: 35px;
                text-align: center;
                line-height: 35px;
            }
        }
        &:nth-child(1)
        {
            a
            {
                i
                {
                    color: green;
                }
            }
        }
    }
}

nth-child无法定位其他元素内的元素

1 个答案: