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

Question

我正在尝试使用 CSS nth-child 选择器来设置 href 内的第三个 span 标签的样式，所以 href 是 parent 有效。它似乎不起作用，它要么为所有样式设置样式，要么根本不设置样式。

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 Fiddle:http://jsfiddle.net/db1wsbbo/1/ .

Answer 1

您选择的是第三个 anchor 而不是第三个跨度。 http://jsfiddle.net/db1wsbbo/2/

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

<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>