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。(第 n 个子项、第二个类型等) 我无法向此 span 标记添加 ID 或类。

帮助将不胜感激。

Answer 1

对于选择第二个 li 尝试

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

然后为了选择第二个 li 的跨度，在之后添加 span:

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