CSS nth child - 在href中选择错误的span元素

Question

我正在尝试使用CSS nth-child选择器来设置href内第三个范围标记的样式，因此href是有效的父级。它似乎不起作用，它要么全部样式，要么根本没有。

HTML看起来像这样：

<div class="h3">
<span class="arr-bottom arrow-down chev-align">&nbsp;</span>
    <a href="#" class="">
        <span class="qFaq">First span</span>
        <span class="">Second span</span>
        <span class="faqChevron fa fa-chevron-down fl-right f">Third Span</span>
    </a>

CSS看起来像这样：

 div.h3 > a:nth-of-type(3) > span {
    color:#999;
  }

我在这里设置了一个JS小提琴：http://jsfiddle.net/db1wsbbo/1/。

Answer 1

您正在选择第3个锚而不是第3个范围。 http://jsfiddle.net/db1wsbbo/2/

＆＃13;

＆＃13;

.nth span:nth-child(3) {
  color: grey;
}

＆＃13;

<div class="h3">
  <span class="arr-bottom arrow-down chev-align">&nbsp;</span>
  <a href="#" class="nth">
    <span class="qFaq">Q</span>
    <span class="">This is a span</span>
    <span class="faqChevron fa fa-chevron-down fl-right f">grey color</span>
  </a>
</div>

＆＃13;

＆＃13;

＆＃13;