html - 如何使用纯 CSS 定位 ul 中的第二个 span 标签？

Question

编码：

<ul class="site-nav list--inline " id="SiteNav">   
  <li class="site-nav--active">
    <a href="/" class="site-nav__link>
      <span class="site-nav__label">HOME</span>
    </a>
  </li>    
  **<li>
    <a href="/" class="site-nav__link">
      <span class="site-nav__label">ORDER NOW</span>
    </a>
  </li>**    
  <li>
    <a href="/" class="site-nav__link">
      <span class="site-nav__label">TRACK ORDER</span>
    </a>
  </li>    
  <li>
    <a href="/" class="site-nav__link">
      <span class="site-nav__label">HELP CENTER</span>
    </a>
  </li>

</ul>

我想使用纯 CSS 将列表中的 SECOND span 标签定位：site-nav__label。（nth-child、second-of-type 等）我无法将 id 或类添加到这个 span 标签。

帮助将不胜感激。

标签： htmlcss

Answer 1

选择第二次li尝试

#SiteNav li:nth-of-type(2)

然后为选择第二个 li 的跨度添加span：

#SiteNav li:nth-of-type(2) span