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

Question

我正在尝试通过 "nth-child" 选择器定位 "i" 元素，但我不知道 how.Can 请您向我解释一下如何？在我尝试过的代码中，我使用的是 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

您需要 select ul（父级）的 nth-child。所以你需要定位 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 定位其他元素内的元素

Cannot target an element inside other element by nth-child

css

parent

css-selectors