Question

代码：

.form-actions {
    color: red;
    font-family: "Open Sans Condensed";
    font-size: 18pt;
    font-weight: bold;
    background-color: #595959;
    padding: 0;
    border: none;
    border-radius: 0;
}

我想使用纯CSS（类别为nth-child，second-of-type等）使用class：site-nav__label定位列表中的SECOND span标签。我无法向该span标签添加ID或类。

我们将不胜感激。

Answer 1

要选择第二个li，请尝试

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

，然后选择span，以选择第二个li的跨度：

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

Answer 2

要定位span，请结合使用nth-of-type和子组合器

#SiteNav > li:nth-of-type(2) > a > span {
  font-weight:bold;
  color:red;
}

/*Or Target the span class*/
#SiteNav > li:nth-of-type(2) .site-nav__label {
  font-style:italic;
}

<ul class="site-nav list--inline " id="SiteNav">   
  <li class="site-nav--active">
    <!-- Fixed Missing closing " -->
    <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>

有关nth-child（和nth-of-type）的一篇好文章，请参见https://css-tricks.com/useful-nth-child-recipies/

Answer 3

因为要在ul标签中使用，所以我将ul.site-nav用于ul标签，其类为site-nav

ul.site-nav li:nth-of-type(2) a > span {
  border: 3px solid red;
}

<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定位ul中的第二个span标签？

3 个答案: